Category page

[Pete McNamara]

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

[Matt Zimmermann]

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.

[Pete McNamara]

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).

[Matt Zimmermann]

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.

[Pete McNamara]

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?

[Pete McNamara]

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

[Pete McNamara]

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.

[Matt Zimmermann]

Hi Pete,

I would try something like this:

outline: 1px solid #666;
outline-offset: -4px;

[Pete McNamara]

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