How to change 2 products per row on catalog page in version 4.1

Hi,

How to yo set 2 products per row on mobile? I was able to set it in version 3.9 by change
@media all and (min-width: 481px) to @media all and (min-width: 480px), but it does not seem to work on current version 4.1

Thank you

Hello toanhnt,

it is not safe to change the break-point values in the themes CSS files.

Instead you can use the following code, which you should add to your themes Custom Head Styles section:

@media all and (max-width: 480px) {
    .item-box {
        width: 49%;
        margin-left: 2%;
    }
    .item-box:nth-child(2n+1) {
        clear: both;
        margin-left: 0;
    }
}

Have in mind that this will affect also the category and sub-category boxes, but I guess this is what you are looking for since the modification you previously did would have affected them, too.