Media Query Tablet and Desktop only CSS not working

Store Design
, ,
1

Hi there,

I seem to be having trouble getting media queries working on my site. Developers have managed to get these working previously, however any time I try to add any CSS for certain devices I’ve been unable to get it to work.

An example is the below. I’d like to tighten up the margins for desktop only in the below section, so I added the following CSS.

@media only screen and (min-width: 796px)
{
.container
{margin-top: -3em !important;
margin-left: 3em !important;}
}

Screenshot 2022-11-30 at 09.14.50.png
Screenshot 2022-11-30 at 09.14.50.png2696×1002 290 KB

The CSS works fine without the media query, but as soon as I add this in the code just does not work at all.

Here is the page: https://hello-ea9a.myshopify.com/pages/sustainability

What am I doing wrong?

Thanks in advance

2

Hi Aimee50,

Media Query is working fine. Make sure you are applying to the right class in the CSS file. I have implemented that in the inspector and working fine.

3

Hi @EcomRAZ thanks for your response. I’m certain it’s the correct class as it works fine when I take the media query away. However whenever I’ve tried to put a media query in it does not work at all.

4

Hi @Aimee50 ,

Then you need to make sure you are editing the right coding file. Because when I apply this query in web inspector, it works fine.

5

Thanks @EcomRAZ
I’ve made a screen-recording showing what’s happening here: https://www.loom.com/share/6c84843880ec4c63903fee75ea61fa3c

I’ve also tried editing the styles.css.liquid file but am unsure what selector to use as there are obviously many .container styles throughout the site. I have also tried giving the section a CSS class which has not helped.

Thank you

6

Hi @Aimee50 ,

.container is too general. That’s why it’s not working. You need to use a specific class related to that section only with section ID

7

@EcomRAZ could you please let me know what you are using to select this as I have been trying for hours with no luck. I have tried every class and ID I can see and have not been able to implement this. I’m at my wits end. Thank you

8

After all that and days of frustration it turns out the code I had above where I was putting this code didn’t have a closing bracket :upside_down_face: lesson learned. Thank you!

9

Hi @Aimee50 ,

That’s great to hear. As per the given code you attached above, the syntax and brackets were fine. That’s why I asked where you are adding that code because when we integrate any code in the file, We need to make sure of that code syntax as well.