Jump to content

@media just won't work


Lucy
 Share

Recommended Posts

Every time I try to use this it just seems to fail. As far as I can tell, there shouldn't be anything wrong with my code, so what's going on? I have this code in my header:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

And this is what I'm trying to use (not the effect I want in the end, but a background colour change should make it obvious when it's working):

	@media screen and (max-width:700px) {	body	{	background-image:none;	background-color:red;	}	}

Also, I'm using Notepad++ which puts everything in different colours - other than the @ and {, it doesn't do anything with the first line, as if it's not valid code or something. I must be missing something?

 

 

Edit -

 

Changed it, and eventually got it to do something:

@media (max-width: 700px) {  #main {    background: red;	font-size:0.3em;  }}

Doesn't make any sense. Why on earth can it work for a div, but not the body? Oh, and the font size doesn't work at all. :(

Edited by Lucy
Link to comment
Share on other sites

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>title</title><style>	@media screen and (max-width:700px) {	body	{	background-image:none;	background-color:red;	}	}#px800{width:800px;border:1px solid #333}#px700{width:700px;border:1px solid #333}#px600{width:600px;border:1px solid #333}#px500{width:500px;border:1px solid #333}#px250{width:250px;border:1px solid #333}#px100{width:100px;border:1px solid #333}#px50{width:50px;border:1px solid #333}</style><script>window.onload = function(){setInterval(postwidth,1000);}function postwidth(){document.getElementById('out1').innerHTML = 'window width:<b> '+ window.innerWidth +' px</b>';}</script></head><body><p>And this is what I'm trying to use (not the effect I want in the end, but a background colour change should make it obvious when it's working):</p><div id="px800">800</div><div id="px700">700</div><div id="px600">600</div><div id="px500">500</div><div id="px250">250</div><div id="px100">100</div><div id="px50">50</div><div id="out1"></div></body></html>
Link to comment
Share on other sites

Well, your example showed that it should work, so after a long time I found out that firstly, changing the body's background colour and image wasn't going to stop the div on top of it from having a background (I feel so stupid...). The font size didn't work because I have 'rem' for all my font sizes other than html and body - I hadn't realised the 'root' is html, not body. :rolleyes:

 

Also, happy birthday! :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...