Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Media Query Won't Work [duplicate]

I keep trying to do a media query in my CSS doc doing something like:

@media screen and (max-device-width: 480px) { /*css here*/}

but it won't work when I test it on an iPhone. I've tried changing the sizes and using the portrait/landscape feature, but still nothing. What am I doing wrong?

like image 521
Alex Clinton Avatar asked Aug 13 '13 10:08

Alex Clinton


4 Answers

Check that you have

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

in the head of your doc

like image 118
David Taiaroa Avatar answered Sep 28 '22 08:09

David Taiaroa


I always call mine when I link the CSS in the head of the HTML.

An example from a current page I'm working on:

<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 320px) and (max-device-width: 500px)" href="css/mobile.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 501px)" href="css/main.css" />

This selects the CSS doc that will be loaded right from the start instead of selecting styles after the CSS document is loaded (reduces number of HTTP requests)

When doing this within the CSS document itself, you should generally replace max-device-width with max-width.

like image 29
mikedugan Avatar answered Sep 28 '22 08:09

mikedugan


this is a samples media query css

/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 980px) {
your css here
}

/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {
your css here
}
/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 480px) {
your css here
}

Hard to understand as you have not provided the code..but the common mistake people do it by not adding this meta data

<meta name="viewport" content="width=device-width, initial-scale=1">
like image 34
San Avatar answered Sep 28 '22 06:09

San


Use "max-width" instead of "max-device-width" which is fixed per device.

like image 30
Shlomi Komemi Avatar answered Sep 28 '22 08:09

Shlomi Komemi