Why in the world are my @media queries not working?

Store Design
1

Hello all,

I’ve tried every solution I could find at this point. I didn’t want to bother you guys and I’m fairly good with CSS but I must be doing something wrong and I can’t figure it out. I have a @media query set to 1000 and it just will not make the changes I set at that point no matter what I do. Please help! Thanks so much. here is the link and CSS… https://n6qnut267qv8zpia-82094653713.shopifypreview.com

@media only screen and (max-width: 1000px) {
#testDiv{
position:relative;
margin:auto !important;
left:30px !important;
top:70px !important;
}
}

by the way, I have this on Base.css and the theme is Effortless. It basically affects the little guy in the mask to change position on the home page.

1 Like
2

Hi @rezerekted

Please provide password protected

3

Lucha

4

Sorry luch

5

Hi @rezerekted

I checked you website, the one that you have in the base.css is this one.

Made4uoRibe_0-1698960874873.png
Made4uoRibe_0-1698960874873.png567×170 5.73 KB

I try this code in the inspect and it working on my side.

Made4uoRibe_1-1698960950888.png
Made4uoRibe_1-1698960950888.png956×459 43.2 KB

@media only screen and (max-width: 1000px){
#testDiv {
    position:relative;
    margin:auto !important;
    left:30px !important;
    top:70px !important;
}
}

Dont forget to save and refresh the page and previews.

If still not working on the base.css you can paste it on the other file.

Go to the theme.liquid file and paste the code below before the tag

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

6

Thank you for your reply but I have tried with several browsers as well as clearing the cache file on my computer but the @media queries are just not working for some reason. I even tried switching up the numbers and then inspecting the page. Any other advice you can give? I’m really stuck for a solution.

7

Hi @rezerekted

You can try to update your code like this and check again

@media (max-width: 1000px) {
	#testDiv {
		position:relative;
		margin:auto !important;
		left:30px !important;
		top:70px !important;
	}
}
8

Even in the liquid.theme file? its not working?

9

No sir. I’ve tried both. I don’t know why it’s not working. When my screen reaches the size I put in the code, nothing. I’m even reaching out to the theme maker to see if he put something in there to block it.