Announcement

Collapse
No announcement yet.

Category page

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Category page

    Hello,

    I wish to retain the default layout for the product list items on the category page but want a 1px solid border on each product box and each box to have a 1px margin all around (so there will be 2px between each box).

    When I implement the above changes, the number of boxes in each row is decreased so e.g. for the desktop, only 3 boxes are displayed in each row instead of 4. We need the default number to display for all device sizes.

    I have tried changing various css settings but it seems there is no room in the outer box for just 12 extra pixels. This seems to me to be a rather inflexible width.

    Be that as it may, I am seeking advice as to the best solution and what css to change:

    1. Is it better to widen the outer box by 12 px or
    2. to reduce the width of the product list item boxes by 3px

    especially considering the effect in devices of different sizes.

    Then, which settings do I change?


    Pete

    #2
    Hi Pete,

    I'm not quite following the layout you are looking for, however, if the final result is for each product to have a border, I would recommend adding the border to the "x-product-list__link" class in your theme-styles.css file.
    Matt Zimmermann

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment


      #3
      But that is exactly what I did. Despite it being only a 1px border, it immediately caused the number of products in each row to decline from 4 to 3 (for a desktop - I never checked what happened for mobile).

      Comment


        #4
        Hi Pete,

        That should work without causing a change in the layout. Make sure you are applying the border to "x-product-list__link" and not to "x-product-list", Alternately, you can apply an outline instead of a border. Outlines do not follow the box model, so it shouldn't disrupt the layout either.
        Matt Zimmermann

        Miva Web Developer
        Alchemy Web Development
        https://www.alchemywebdev.com
        Site Development - Maintenance - Consultation

        Miva Certified Developer
        Miva Professional Developer

        https://www.dev4web.net | Twitter

        Comment


          #5
          Hmm. I think I see part of my problem. I made changes to the ".x-product-list__item" in the "product-lists.css" file. I now see that ".x-product-list__item" is also in the "themes.css" file and that if I make the changes there, I get a different result.

          Matt, once I found the correct css file to change, your suggestion worked except for one thing - the ".x-product-list__link" box (i.e. the part defined by the border) heights then vary, so the appearance of the boxes is unacceptably untidy. Thus the border needs to go around the ".x-product-list__item" box (to ensure each box, as defined by the border, is the same height.

          So, when I put the 1px border on the ".x-product-list__item" box, the rows wrap with only 3 products per row. This result is not acceptable, I must have the default i.e. 4 per row. Any suggestions?

          Comment


            #6
            And, I need a 2px, preferably 3px margin, around all the ".x-product-list__item" boxes.

            Comment


              #7
              Also, "outline" works a little better but without a margin between the boxes, the outline is double thickness on all of the ".x-product-list__item" boxes except for the top of the top row, the bottom of the bottom row, thr right of the right column and the left of the left column. The appearance is less than satisfactory. That's why I need a a margin.

              Comment


                #8
                Hi Pete,

                I would try something like this:
                Code:
                outline: 1px solid #666;
                outline-offset: -4px;
                Matt Zimmermann

                Miva Web Developer
                Alchemy Web Development
                https://www.alchemywebdev.com
                Site Development - Maintenance - Consultation

                Miva Certified Developer
                Miva Professional Developer

                https://www.dev4web.net | Twitter

                Comment


                  #9
                  Thanks Matt. I have been waylay-ed by another job but will try that tomorrow. Also, after a bit of thinking, I am also going to try setting the property "box-sizing: border-box;" for the ".x-product-list__item" to see if I can accomplish my objective. So, then I would create the border and the padding inside the box/block. What do you think?

                  The problem I see with using outlines and offsets is that this seems a workaround solution and that workarounds often cause cross browser compatibility problems. Anyway, it is an approach that I hadn't thought of, and an alternative, so thanks.

                  Pete

                  Comment

                  Working...
                  X