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

[♥Tsimi]

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">

to

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

and

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

to

<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?
 

[burt]

Maybe your phone is caching the page ?

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

 

EDIT:

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

[♥Tsimi]

Thanks G.

Cleared the cache on my phone, which wasn't easy to find, and now all is good.