CODEWITHSUNDEEP
cssresponsive-designmedia-queries
user2504174
user2504174

Reputation: 25

CSS Media Query don't working in css file

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)

Upvotes: 1

Views: 17019

Answers (2)

Adam Simpson
Adam Simpson

Reputation: 3681

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.

Upvotes: 18

Qiqi Abaziz
Qiqi Abaziz

Reputation: 3353

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

Upvotes: 6

Related Questions