How to add a media query for mobile screen sizes?

Store Design
1

Hi guys,

I am trying to add a media query for the mobile screen size but not sure where to put it and exactly how.

I am trying to achieve where the mobile screen size shows the collections one per row and currently, it shows 2 per row. The fullscreen and desktop sizes are correct as they should display 3 per row. I am using the debut theme.

Thank you in advance
Jason

mobile
mobile998×652 228 KB

desktop full screen
desktop full screen1058×658 635 KB

screensnap.PNG
screensnap.PNG276×120 2.5 KB

2

@jasonLodder

Please share your web shop URL !

Thanks!

3

https://shop.jamesmuller.co.uk/

The password to access it is "cleaso"

Thank you

4

@jasonLodder

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media only screen and (max-width: 749px){
#shopify-section-1621793322c8b7c626 .small--one-half {width: 100% !important;}
}

Thanks!

5

Thank you @dmwwebartisan , that worked perfectly! You are a superstar!

6

@dmwwebartisan i am hoping you can help for this theme -New Products – Maxdino Store (maxdino-demo.myshopify.com) same issue about mobile showing only one column.. wanted it to show two columns .. thanks!!