Jump to content


This topic is now archived and is closed to further replies.


2 products per row in XS viewport (New Products index)

Recommended Posts

For the life of me I cannot figure out how to show more than 1 product per row for the new products (index) module in XS viewport.

By default you have 1 row or better say column view at XS and 4 products per row starting from SM viewport.
Now I tried to anything that I can think of but can't seem to figure it out.

Changing for example

<div class="col-sm-<?php echo $content_width; ?> new-products">


<div class="col-xs-12 col-sm-<?php echo $content_width; ?> new-products">


<div class="col-sm-<?php echo $product_width; ?>" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/Product">


<div class="col-xs-6 col-sm-<?php echo $product_width; ?>" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/Product">

and added this to my user.css file

@media only screen and (max-width : 768px) {
.row.list-group {
    -webkit-flex-direction: row;
    flex-direction: row;

still it won't work on my Android phone using Chrome or my wifes iPhone 8 plus. It always shows only 1 row/column at XS viewport.
However if you "simulate" it by using CTRL+SHIFT+m on Firefox it does show fine with 2 rows. So I guess the simulation is not that accurate after all.

Does anyone have an idea what I am missing?

Share this post

Link to post
Share on other sites

Maybe your phone is caching the page ?

What you have done, adding col-xs-6 is correct...



You don't need this change;

<div class="col-xs-12 col-sm-<?php echo $content_width; ?> new-products">

as this would already default to xs=12

Help shape the future of Phoenix; join the Phoenix Club

Share this post

Link to post
Share on other sites