Jump to content
Latest News: (loading..)
Tsimi

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

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?
 

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

 

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

Edited by burt

This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×