Shopify Question posted in
The Shopify help center can be found here.

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: DELETED URL

Update: Screenshot of what happens DELETED URL

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    Your code is missing this:

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

    if you want to align everything in a correct row the classes eventually need a float declaration:

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

    If you get spacings that should not be there, there is very simple solution:

     *{
  margin : 0 ;
  padding : 0 ;
 }

    Your css also suffers some parse errors which could also lead to some
    errors.
    Here is a unicorn test of your shop:
    https://validator.w3.org/unicorn/check?ucn_uri=https%3A%2F%2Fblupstore.com%2F&ucn_task=conformance#

    Login or Signup to reply.
  3. 0

    You can add some css style.

    @media only screen and (max-width:600px) {
 .product-item:nth-child(2n+1) {
   clear: left !important;
 }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search