How to combine two media queries?-CodePudding

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;
}

CodePudding user response：

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 comming back to ur question, there are some operators used to operate the @media querries

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 !!!

CodePudding user response：

Try

@media only screen and (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