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

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

rezerekted
Shopify Partner
12 0 3

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.

Replies 8 (8)

Dan-From-Ryviu
Shopify Partner
10094 2006 2058

Hi @rezerekted 

Please provide password protected 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

rezerekted
Shopify Partner
12 0 3

Lucha

rezerekted
Shopify Partner
12 0 3

Sorry luch

Dan-From-Ryviu
Shopify Partner
10094 2006 2058

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;
	}
}

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Made4uo-Ribe
Shopify Partner
8813 2109 2586

Hi @rezerekted 

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

Made4uoRibe_0-1698960874873.png

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

Made4uoRibe_1-1698960950888.png

 

@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 </body>

 

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

 

And Save.

 

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
rezerekted
Shopify Partner
12 0 3

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.

Made4uo-Ribe
Shopify Partner
8813 2109 2586

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
rezerekted
Shopify Partner
12 0 3

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.