Close

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

toanhnt
13 days ago
#14949 Quote
Avatar
  • 22
PM
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
Valentin
13 days ago
#14950 Quote
Avatar
  • Moderator
  • 98
PM
toanhnt wrote:
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.
Best Regards,

Valentin Kirov
Nop-Templates.com