Why are my CSS3 media queries not working?

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?

Answers


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...


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) {}

Make sure your css comments all use this markup /* ... */ -- which is the correct comment markup for css according to MDN

I had copied bootstrap 4 media queries straight from their docs and every query is labeled with the same javascript style comment markup // !

Furthermore, IntelliJ text editor allowed me to comment out specific lines of css in a LESS file but automatically used //. It's no freeware so I assumed it had it right. There's a preference menu for correcting this behavior.

Also, validate your css with a trustworthy online validator. Here's one by W3


@media all and (max-width:320px)and(min-width:0px) {
  #container {
    width: 100%;
  }
  sty {
    height: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

.username {
  margin-bottom: 20px;
  margin-top: 10px;
}

I use a few methods depending. In the same stylesheet i use: @media (max-width: 450px), or for separate make sure you have the link in the header correctly. I had a look at your fixmeup and you have a confusing array of links to css. It acts as you say also on HTC desire S.


For me I had indicated max-height instead of max-width.

If that is you, go change it !

    @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }

It may also happen if the browser zoom level is not correct. Your browser window zoom should be 100%. In Chrome use Ctrl + 0 to reset the zoom level.


I encountered this issue recently too, and I later found out it was because I didn't put a space between and and (. This was the error

@media screen and(max-width:768px){
}

Then I changed it to this to correct it

@media screen and (max-width:768px){
}

Throwing another answer into the ring. If you're trying to use CSS variables, then it will quietly fail.

@media screen and (max-device-width: var(--breakpoint-small)) {}

CSS variables don't work in media queries (by design).


Weird reason I've never seen before: If you're using a "parent > child" selector outside of the media query (in Firefox 69) it could break the media query. I'm not sure why this happens, but for my scenario this did not work...

@media whatever {
    #child { display: none; }
}

But adding the parent to match some other CSS further up the page, this works...

#parent > #child { display: none; }

Seems like specifying the parent should not matter, since an id is very specific and there should be no ambiguity. Maybe it's a bug in Firefox?


Need Your Help

Remove leading and trailing slash /

python django path strip

I am using request.path to return the current URL in Django, and it is returning /get/category.

Permutations - all possible sets of numbers

php permutation combinatorics

I have numbers, from 0 to 8. I would like in result, all possible sets of those numbers, each set should use all numbers, each number can occur only once in a set.