Why are my CSS3 media queries not working?
Why are my CSS3 media queries not working?
Question
In the styles.css, I am using media queries, both of which use a variation of:
/*--[ Normal CSS styles ]----------------------------------*/
@media only screen and (max-width: 767px) {
/*--[ Mobile styles go here]---------------------------*/
}
The sites resize to the layout I want in a regular browser (Safari, Firefox) when I shrink the window, however, the mobile layout isn't shown at all on a phone. Instead, I just see the default CSS.
Can anyone point me in the right direction?
Accepted Answer
All three of these were helpful tips, but it looks like I needed to add a meta tag:
<meta content="width=device-width, initial-scale=1" name="viewport" />
Now it seems to work in both Android (2.2) and iPhone all right...
Read more... Read less...
Don't forget to have the standard css declarations above the media query or the query won't work either.
.edcar_letter{
font-size:180px;
}
@media screen and (max-width: 350px) {
.edcar_letter{
font-size:120px;
}
}
I suspect the keyword only may be the issue here. I have no issues using media queries like this:
@media screen and (max-width: 480px) { }
i used bootstrap in a press site but it does not worked on IE8, i used css3-mediaqueries.js javascript but still not working. if you want your media query to work with this javascript file add screen to your media query line in css
here is an example :
<meta name="viewport" content="width=device-width" />
<style>
@media screen and (max-width:900px) {}
@media screen and (min-width:900px) and (max-width:1200px) {}
@media screen and (min-width:1200px) {}
</style>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>
css Link line as simple as above line.
Today I had similar situation. Media query did not work. After a while I found that space after 'and' was missing. Proper media query should look like this:
@media screen and (max-width: 1024px) {}
The sequential order of css code also matters, for example:
@media(max-width:600px){
.example-text{
color:red;
}
}
.example-text{
color:blue;
}
the above code will not working because the executed order. Need to write as following：
.example-text{
color:blue;
}
@media(max-width:600px){
.example-text{
color:red;
}
}