261

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?

3
  • 3
    What mobile phone is it? Media Queries is a new feature in CSS, not all mobile phone browsers support it...
    – Sparky
    Commented Oct 22, 2011 at 12:01
  • 1
    iPhone 4 and I am also testing on an android phone (2.2 Froyo) with a 320 x 480 resolution. Commented Oct 22, 2011 at 12:09
  • Actually I switched to the following media Query on iPhone 4 and it works (but I have to change my CSS to accomodate the higher resolution) @media only screen and (-webkit-min-device-pixel-ratio: 2) { } Commented Oct 22, 2011 at 12:28

22 Answers 22

660

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

3
  • 76
    Actually <meta name="viewport" content="width=device-width, initial-scale=1"> Commented Nov 2, 2014 at 11:20
  • 2
    @LukasLukac why's that? Commented May 10, 2020 at 2:54
  • convention I'd bet @Jon Commented Jul 10, 2021 at 20:56
104

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;
    }
}
2
  • 7
    In fact, have your css styles stacked in decreasing order from standard to smallest size. The rules still applies If you have your media queries all in the same file. Commented Oct 14, 2016 at 22:02
  • 1
    Works for me even if I don't have a standard css declaration for said class.
    – Mason
    Commented Jul 17, 2017 at 12:23
24

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

24

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.

0
21

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) {}
1
  • 2
    That's why we have CSS validators. This is not relevant to this particular problem because the OP already points out that the media queries do in fact work in non-mobile browsers.
    – cimmanon
    Commented May 20, 2015 at 17:01
14

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 work because of the execution order. Need to write as following:

.example-text{
   color:blue;
}
@media(max-width:600px){
  .example-text{
     color:red;
   }
}
1
  • oh man! Thanks... tried a lots of modification but only this worked :)
    – T.M15
    Commented Mar 14, 2021 at 15:14
7

Always mention max-width and min-width in some unit like px or rem. This figured it out for me. If I write it without the unit and only the number value, browser can't read the media queries. example: this is wrong @media only screen and (max-width:950) and this is right @media only screen and (max-width:950px)

0
5

The OP's code snippet clearly uses the correct comment markup but CSS can break in a progressive way — so, if there's a syntax error, everything after that is likely to fail. A couple times I've relied on trustworthy sources that supplied incorrect comment markup that broke my style sheet. Since the OP provided just a small section of their code, I'd suggest the following:

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

Validate your css with a linter or a secure online validator. Here's one by W3

More info: I went to check the latest recommended media query breakpoints from bootstrap 4 and ended up copying the boiler plate straight from their docs. Almost every code block was labeled with javascript-style comments //, which broke my code — and gave me only cryptic compile errors with which to troubleshoot, which went over my head at the time and caused me sadness.

IntelliJ text editor allowed me to comment out specific lines of css in a LESS file using the ctrl+/ hotkey which was great except it inserts // by default on unrecognized file types. It isn't freeware and less is fairly mainstream so I trusted it and went with it. That broke my code. There's a preference menu for teaching it the correct comment markup for each filetype.

3
  • 1
    OP is already using the correct comment markup, as demonstrated in the post.
    – TylerH
    Commented Aug 16, 2017 at 13:48
  • Actually if you hover over the downvote button you will see exactly what they are for. Aside from that, downvotes are 1) anonymous and 2) not trolling. Further, flaming someone is not the way to get them to change something you think they did.
    – TylerH
    Commented Mar 15, 2018 at 14:33
  • 1
    This helped me fix my own code. I was using // rather than /* */. Thanks.
    – JDot
    Commented Mar 7, 2021 at 21:30
5

Add Below tag in html's head section

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

3

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.

0
3

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

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

1
  • This would be more appropriate as a comment since it is only ancillary information to the question.
    – TylerH
    Commented Feb 8, 2021 at 17:12
2

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?

2

It is important that the @media screen must be at the end of the css

1

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.

1
  • Will take a look at the CSS again, thanks...good to know it works on something. Commented Oct 22, 2011 at 12:29
1
@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;
}
2
  • 7
    please add some explanation to your code, showing how it solves the problem - this will help others in the future, and your answer is more likely to get upvoted Commented Mar 4, 2015 at 10:26
  • 2
    While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.
    – Ferrybig
    Commented Feb 12, 2016 at 15:07
1

due to only not typo mistake not work for me @media screen and(max-width: 930px) require sopace between the (and) & opening bracket @media screen and (max-width: 930px)

1
  • Could you please try to write proper sentences to improve readability.
    – jhinghaus
    Commented Mar 23, 2021 at 21:29
1

The Only Fix You All Need Is :

Just Take All The Media Queries At The End Of A .CSS File

It Works, Try It

-1

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;
        }
    }
-1

For everyone having the same issue, make sure you actually wrote "120px" instead of only "120". This was my mistake and it drove me crazy.

1
-1

Well, in my case, the px after the width value was missing ... Interestingly, the W3C validator did not even notice this error, just silently ignored the definition.

1
-3

I was having this same problem and it turns out my media queries were in the wrong order. They should be defined from widest to smallest in the CSS

0

Not the answer you're looking for? Browse other questions tagged or ask your own question.