CODEWITHSUNDEEP
htmlcsswebfrontend
CodeForGood
CodeForGood

Reputation: 749

How to combine two media queries?

How can I combine the queries below? Please help me understand how it can be done.

@media only screen and (max-width: 576px)  {
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1.1rem;
}

@media only screen and (min-width: 750px) and (max-width: 900px) {
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1.1rem;
}

Upvotes: 1

Views: 173

Answers (2)

Rahul Kumar Jha
Rahul Kumar Jha

Reputation: 359

In your question u just need to add a comma ',' to combine them

@media only screen and (max-width: 576px), @media (min-width: 750px) and (max-width: 900px)  {
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1.1rem;
}

Suggestion: notice in your example u are trying to apply the max-width two times with same style. Try to add only one max-width. if u just use your second code then also the result will be same.

But coming back to your question, there are some operators used to operate the @media queries

These are the operators for media queries

  • , (comma, which works as an OR in a list of media queries)
  • and
  • not
  • only

Hope this solves your problem. Enjoy !

Upvotes: 2

Yves
Yves

Reputation: 278

Try

@media (max-width: 576px), (min-width: 750px) and (max-width: 900px) {
    /* Your code */
}

However, I recommend you to separate them since the 1st one targets mobiles and the 2nd one targets mainly tablets and small computers.

For more info go to https://www.w3schools.com/Css/css3_mediaqueries_ex.asp

Upvotes: 2

Related Questions