Close

2 columns in categories pages in a mobile phone

msofia
2 years ago
#13574 Quote
Avatar
  • 1
Hi,

How can I enable a 2 column layout in categories pages in a mobile's phones view? I want to see 2 products per line. The template is really great, but I prefer to see 2 columns instead of only one.

Thank you very much!
Miguel
hristo
2 years ago
#13576 Quote
Avatar
  • Moderator
  • 119
msofia wrote:
Hi,

How can I enable a 2 column layout in categories pages in a mobile's phones view? I want to see 2 products per line. The template is really great, but I prefer to see 2 columns instead of only one.

Thank you very much!
Miguel


Hello Miguel,

there's no such option to enable or disable, but you can achieve that by adding a little extra css to your theme. Just paste this code into the custom head styles panel in your theme administration:

@media all and (max-width: 480px) {
.product-grid .item-box,
.product-list .item-box {
    width: 48%;
    margin: 0 1% 30px;
    float: left;
}
.product-grid .item-box:nth-child(2n+1),
.product-list .item-box:nth-child(2n+1) {
    clear: both;
}
}

This code will affect only product boxes on "phone" screen resolutions. Manufacturers and Category items will remain unaffected.
Regards,
Hristo Gospodinov
Nop-Templates.com