Ad

Media Query Isn't Displaying Correctly On Shopify

I wanted to change how my site displays my products on a mobile device. As standard it was displaying one item per row and i wanted to show two items per row.

I used the following CSS to acheive this:

@media only screen and (max-width: 600px) {
.product-item{
  width: 50%;
}
}

I tested in chrome and firefox browser tools and it appeared to work fine on mobile view.

On a real phone there is white gaps and sometimes only 1 item per line.

Can anyone help? My website url is: https://blupstore.com/

Update: Screenshot of what happens https://ibb.co/HpnhVcw

Ad

Answer

I found a temporary fix. I used:

@media only screen and (max-width:600px) {
  .product-item{
    float : left !important;
    width: 50% !important;
    border: red solid;
    box-sizing:border-box  
  }
 }

I could see the first item was messing up the layout. I removed it from the category and re added it at the bottom. This is by no means a fix but it is a good solution to fix the display while i fix the parse errors.

This wouldn't have been possible without the help from @Thorsten Wolske and @Nikhil Gangurde

Ad
source: stackoverflow.com
Ad