CODEWITHSUNDEEP
cssmedia-queries
user3090345
user3090345

Reputation: 1

Media query with default style doesn't work as intended

Here's my code:

@media (max-width: 480px) {
    .content {padding:4px;}
}   

@media (min-width:481px){
    .content {padding:10px;}
}

It works properly. But, it doesn't work as I intend when I change it like the below:

@media (max-width: 480px) {
    .content {padding:4px;}
}

.content {padding:10px;}

I intended to make ".content {padding:10px}" a default style. Only screen width less than equal to 480px uses ".content {padding:4px}".

Upvotes: 0

Views: 106

Answers (1)

lc.
lc.

Reputation: 116528

With the default style last as in your example, it will override anything that has already been set. CSS is processed from top to bottom and any properties specified more than once will take the last specified value.

Therefore, put the default style first. This way if the @media query matches, it will override the already-set default style of 10px. 

.content {padding:10px;}

@media (max-width: 480px) {
    .content {padding:4px;}
}

Upvotes: 2

Related Questions