1

Added this line in index.html:

 <link href="css/style.css" media="all  "rel="stylesheet" type="text/css" />

And this is my Media Query CSS:

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {
     #mapArea .white span {
        width: 100px;
     }

}

But when i check it in browser, don't working. What's my problem? How can i fix it?

(Tested all modern browsers)

5
  • check the browser version. Should be latest to test this.. CSS 3 feature Commented Jun 20, 2013 at 8:04
  • @Nirus thank you. Tested all modern browsers. My main browser is Chrome and its version 27.0.1453.116 m Commented Jun 20, 2013 at 8:06
  • Maybe the spaces in the link are causing issues?, try <link rel="stylesheet" type="text/css" href="css/style.css"> Commented Jun 20, 2013 at 8:11
  • ... f="css/style.css" media="all "rel="styles ... check your typo. Commented Jun 20, 2013 at 16:02
  • Related subject : stackoverflow.com/questions/15276218/… Commented Jun 20, 2013 at 16:08

2 Answers 2

18

You are querying for device-width, which if your on a laptop or desktop isn't going to fire those queries. Change those to min-width and you should see the query work.

Also, make sure you have a viewport meta tag i.e. <meta name="viewport" content="width=device-width,initial-scale=1.0"> in the <head> of your HTML.

Sign up to request clarification or add additional context in comments.

2 Comments

The meta tag was the solution in my case. Had the same issue - css was working properly on one page, but didn't work on a mirror page. REMEMBER THE META TAG
Yes! How come I've never seen mention of the meta tag needed in all the media queries tutorials I've read? Thank you so much!
6

@media only screen has different definition with @media screen.

The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

Source: http://www.w3.org/TR/css3-mediaqueries/

Maybe you can try change into this:

@media screen and (min-width : 320px) and (max-width : 480px) {
  .white span {
      width: 100px;
  }
}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.