LLLLLLL Posted August 21, 2012 Share Posted August 21, 2012 I'm trying a basic CSS media query. I added these two lines to my file... they are essentially copied from another site, with the href being different and referring to actual files on my server. <link rel="stylesheet" type="text/css" media="screen and (max-width: 740px)" href="assets/css/style_m.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-width: 741px) and (max-width: 900px)" href="assets/css/style.css" /> But this doesn't work for me at all. The result on my site is that the elements on the page act as if no CSS file is declared at all. Is there something more that I need to do? Quote Link to comment Share on other sites More sharing options...
Mahngiel Posted August 21, 2012 Share Posted August 21, 2012 check your debug console for any errors... based on your code i can only imagine the file path is wrong. Quote Link to comment Share on other sites More sharing options...
LLLLLLL Posted August 21, 2012 Author Share Posted August 21, 2012 No, the file path was not wrong. Looks like the problem was actually and (max-width: 900px) since my screen was wider than that. Confused why the original site works with that same query, however. Quote Link to comment Share on other sites More sharing options...
Mahngiel Posted August 21, 2012 Share Posted August 21, 2012 @media max-width will only respond when the viewing area is less than it. if you want to only target devices and not desktops with your queries, you need to use *-device-width Quote Link to comment Share on other sites More sharing options...
LLLLLLL Posted August 21, 2012 Author Share Posted August 21, 2012 I don't understand. Can you clarify why it works on one site but not mine? This is all the relevant code: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <link rel="stylesheet" type="text/css" media="screen and (max-width: 740px)" href="assets/css/style_m.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-width: 741px) and (max-width: 900px)" href="assets/css/style.css" /> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.