CSS Media Query don't working in css file

Question

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)

check the browser version. Should be latest to test this.. CSS 3 feature — NiRUS
– NiRUS, 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 — user2504174
– user2504174, 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"> — maqjav
– maqjav, Commented Jun 20, 2013 at 8:11
... f="css/style.css" media="all "rel="styles ... check your typo. — Milche Patern
– Milche Patern, Commented Jun 20, 2013 at 16:02

Adam Simpson · Accepted Answer · 2013-06-20 15:57:35Z

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.

answered Jun 20, 2013 at 15:57

Adam Simpson

3,6812 gold badges24 silver badges27 bronze badges

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

2 Comments

wick3d Over a year ago

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

forgivenson Over a year ago

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!

Qiqi Abaziz · Accepted Answer · 2013-06-20 08:21:02Z

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

edited Jun 20, 2013 at 8:21

answered Jun 20, 2013 at 8:15

Qiqi Abaziz

3,3533 gold badges18 silver badges12 bronze badges

Collectives™ on Stack Overflow

CSS Media Query don't working in css file

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related