CODEWITHSUNDEEP
cssmedia-queries
Mauro Petrini
Mauro Petrini

Reputation: 351

what pass in width: 320px

I have a problem with a media query in 320px width.. in my general css for standard web resolutions I have this:

body {
    background-image:url(../Images/FondoSL.png);
    font-family: 'Open Sans', sans-serif;
    font-size:1em;
}

.headerPartOne p{
    font-size:0.94em;
    color:#676767;
    margin-left:30px;
    margin-top:5px;
    margin-bottom:0;
}

.contentContentPage fieldset ul li span {
    font-style:italic;
    font-size:0.98em;
    margin-left:35px;
}

and in the media query 320px this:

@media only screen and (min-width: 320px) {

    body {
        font-size:0.7em;
    }

    .headerPartOne p{
        font-size:0.74em;
        color:#676767;
    }

    .contentContentPage fieldset ul li span {
        font-style:italic;
        font-size:0.48em;
    }

}

also i have another media query for web and mobile screen resolutions

@media only screen and (min-width: 600px) and (max-width: 800px)
@media only screen and (min-width: 533px) and (max-width: 853px)
@media only screen and (min-width:1920px)

these media queries work fine.

well my problem is that the query 320px's style is applied to all resolutions, this means that if I run a query to a larger average resolution keeps the styles in 320px media query .. why is this? with other query I do not feel the same, each applies the style I want. (if I not put the 320px media query)

sorry for my english.. thanks

Upvotes: 0

Views: 1559

Answers (3)

CRABOLO
CRABOLO

Reputation: 8793

Lets take this one css rule as an example.

Lets remember, that CSS stands for Cascading Style Sheets. So the rules at the bottom of the sheet overwrite any rules that came before it.

So if you have 

body { 
    font-size: 1em;
}

on line 25 of your css style sheet.

and have 

@media only screen and (min-width: 320px) {

body {
    font-size:0.7em;
}

}

on line 114 of your css style sheet.

The font-size will be 0.7em, since it overwrote the previous style.

Lets say instead of that @media query you did this instead

@media only screen and (max-width: 320px)  { /* notice the max-width instead of min-width */

body {
    font-size:0.7em;
}

}

The font-size will then appear as 1em on regular screens, (any screen above 320px).

Upvotes: 2

codeaddict
codeaddict

Reputation: 879

This will apply to styles below 320px

@media (max-width:320px) {
  /* styles here */
}

Upvotes: 1

Deryck
Deryck

Reputation: 7668

(min-width: 320px) means every resolution greater than 320px in width.

If you want only screens of 320px or less to receive these rules, you need to use (max-width: SIZE) where SIZE is whatever the biggest screen is you want it to be applied to.

Upvotes: 0

Related Questions