Media query not triggering

Question

Media query not triggering

88 Views Asked by Greg At 23 April 2025 at 05:31

I'm trying to use media queries to change background image and hide content in a division tag if the screen goes beyond 640px. This doesn't seem to work. I'm new to this and feel I'm missing something major.

    <html>
   <HEAD>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
<!--
body {background-color:black; overflow:none;}
-->
</style>
</HEAD>
<body>
@media screen and (min-width:641px) {
body {background:white;background-image:url('http://lib.store.yahoo.net/lib/oberers-flowers/Home-Background-2013a.gif');}
div.desktop {visibility:hidden;}
}
<div class="desktop" style="position:absolute;top:0px;left:0px; z-index:1">
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile1.jpg" width="100%" height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile2.jpg"  width=100% height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile3.jpg"  width=100% height=auto>
</div> 
</body>
</html>

Original Q&A

There are 2 best solutions below

TW- On 09 June 2015 at 13:19

For one, you're missing a <style> tag around your media query there. Also, I'd recommend against using inline styles (i.e. style="" attribute tags in your HTML). Keep all your CSS in one place, preferably a separate CSS file you can link to in your head tag.

Also, make sure you keep your media queries declared after your other CSS for those selectors. Whatever comes last will take precedent!

**Matt Hammond** · Accepted Answer

The CSS isn't working because its not contained with-in style tags.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
<!--
body {background-color:black; overflow:none;}


-->

@media (min-width:641px) {
    body {
        background:white;background-image:url('http://lib.store.yahoo.net/lib/oberers-flowers/Home-Background-2013a.gif');}
        div.desktop {visibility:hidden;
    }
}
</style>

</head>
<body>

<div class="desktop" style="position:absolute;top:0px;left:0px; z-index:1">
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile1.jpg" width="100%" height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile2.jpg"  width=100% height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile3.jpg"  width=100% height=auto>
</div> 
</body>
</html>

Media query not triggering

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in MEDIA-QUERIES

Trending Questions

Popular # Hahtags

Popular Questions