CODEWITHSUNDEEP
css
Labanino
Labanino

Reputation: 3960

How to DRY media queries

I have two media queries that have exactly the same .css properties:

@media only screen and (max-width: 320px) { 
   h2 {
        font-size: 3rem;
        line-height: 3.5rem;
    }
    .slider h3 {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }
    .col .wrapper {
      padding: 3rem;
    }
}
@media only screen and (max-width: 480px) { 
   h2 {
        font-size: 3rem;
        line-height: 3.5rem;
    }
    .slider h3 {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }
    .col .wrapper {
      padding: 3rem;
    }
}

What do I have to do to DRY them? I tried:

@media only screen and (max-width: 320px) and (max-width: 480px)

and didn't work. Also tried:

@media only screen and (max-width: 320px), (max-width: 480px)

and didn't work either. Any help? Thanks.

Upvotes: 0

Views: 218

Answers (2)

Ashesh
Ashesh

Reputation: 3599

since they both contain exactly the same CSS Declarations, what's the point of having both of them?

Just get rid of the @media only screen and (max-width: 320px){...} and you should be fine.

The remaining @media only screen and (max-width: 480px){...} declarations will automatically be applied to all widths up-to 480px (this includes 320px, since 320px < 480px).

Upvotes: 1

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13679

You can just use the latter since they are just the same css and the media query (max-width: 480px) still hits resolutions 320px and below

So you only need this :

@media only screen and (max-width: 480px) { 
   h2 {
        font-size: 3rem;
        line-height: 3.5rem;
    }
    .slider h3 {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }
    .col .wrapper {
      padding: 3rem;
    }
}

Upvotes: 2

Related Questions