Developer forum

Forum » Rapido » Promotion product grid

Promotion product grid

E-mail notifications
Søren Bremholm Jakobsen
Reply
Posted on 20/08/2018 09:41:35

Hi,

the promotion product template uses the following grid classes to render the promotion product:

<div class="grid__col-lg-@columnSize grid__col-md-@columnSize grid__col-sm-@columnSize grid__col-xs-6">

The problem is that grid__col-xs-6 doesn't split products into 2 coloums on small mobile phones. It's the same problem/behaviour on the rapido demo site http://rapidodemo.dynamicweb-cms.com/frontpage

Any ideas?


Replies

 
Nicolai Pedersen
Posted on 20/08/2018 16:33:02
Reply

The grid is based on the flexgrid: http://reflexgrid.com/docs/

In flexgrid XS classes have a @media (min-width: 576px) {} definition. And since i.e. iPhone 6 has a width of 375, the xs is not applied.

You can change @media (min-width: 576px) {} to @media (max-width: 576px) {}. But that would require a lot of testing... This is what Bootstrap 4 does - so I believe it is a decission made by the team behind flexgrid...

BR Nicolai

 

You must be logged in to post in the forum