By default, the desktop view of the Storefront theme shows a grid of products, where each row has 4 products in it.
The mobile view, on the other hand, is a list view where each row only has 1 product. The mobile view is a bit more airy as well, which looks great, but causes a lot of scrolling effort to view all of the products.
To make it quicker and easier for users to browse through products, you could consider changing the list view to a grid view on mobile.
Let’s look at the code
I was able to make this change with just a bit of CSS, and support back to IE10. Not too shabby. Especially considering my friend’s website has only had one IE9 order this entire year.
The first selector (.products) says that we’re going to use flex to handle the layout. The second selector (ul.products:before, ul.products:after) is to address a flex-wrap bug in Safari. And the last selector (ul.products li.product) is what makes each product 50% of the width.
[css]
@media only screen and ( min-width: 320px ) and ( max-width: 767px ) {
.products {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
ul.products:before,
ul.products:after {
width: 0 !important;
}
ul.products li.product {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
width: 50%;
padding: 0 .5em;
}
}
[/css]
Leave a Reply