CODEWITHSUNDEEP
cssmedia-queriesmedia
mstroiu
mstroiu

Reputation: 342

Media Queries ignored

I have a slight problem, my css media queries are ignored, or the main css is.

I'm trying to change the value of a size font in media queries, for desktops is 75px and for mobiles (max-width:320px;) is 40px or so. But it doesn't work.

My css media query code is: 

/* Smartphones (portrait) ----------- */

@media only screen and (min-width : 320px) {
  h1.site-title {
    color: #fff;
    font-family: 'Open Sans', sans-serif; 
    font-size: 40px; 
    font-weight: 800; 
    line-height: 1em;
  }
}

When I change the font-size value in the media queries css, it changes in the whole page. (Desktop, tablet, etc.)

What I'm doing wrong ? :(

Thank you,

Cheers

PS: the CSS Media Queries is a separate file, added in the html head, and I have this line to: 

<meta name="viewport" content="width=device-width">.

Upvotes: 3

Views: 8711

Answers (3)

Yenn
Yenn

Reputation: 929

make sure your media query is placed AFTER the original declaration:

This will work: EXAMPLE

.test{
    width:500px;
    height:50px;
    background:red;
}

@media (max-width:500px){
.test{
    width:200px;
}
}

This won't work: EXAMPLE 

@media (max-width:500px){
.test{
    width:200px;
}
}
.test{
    width:500px;
    height:50px;
    background:red;
}

Upvotes: 14

Alok Swain
Alok Swain

Reputation: 6519

Your query says that the media type is screen and min-width is 320px. This is true for a desktop, so the css applies to a Desktop also. If you need it specifically for a tablet then you will have to add some property that is false for a Desktop but true for other device. max-width is one such property.

Do take a look at this link.

Upvotes: 2

RhinoWalrus
RhinoWalrus

Reputation: 3089

Make sure that your media query is on the 'body' level. Otherwise your viewport's min-width won't be recognized.

Upvotes: 1

Related Questions