CODEWITHSUNDEEP
cssmedia-queries
aniskhan001
aniskhan001

Reputation: 8511

Is it possible to combine media queries for same CSS rules?

I currently have this chunk of codes.

@media screen and (min-width: 768px) and (max-width: 990px) {
    .community-info-box {
        width: 100%;
        margin-right: 0;
        float: none;
        ... : ...
    }
}

@media screen and (max-width: 630px) {
    .community-info-box {
        width: 100%;
        margin-right: 0;
        float: none;
        ... : ...
    }
}

What I'm trying to do is something like..

@media screen and (min-width: 768px) and (max-width: 990px),
@media screen and (max-width: 630px) {
    .community-info-box {
        width: 100%;
        margin-right: 0;
        float: none;
        ... : ...
    }
}

so I don't have to write the same properties and values again since they are same. Any ideas?
I also searched for "setting more than 2 breakpoints inside a media query" but there's no luck.

Upvotes: 7

Views: 6116

Answers (1)

razemauze
razemauze

Reputation: 2676

You don't have to add @media again in the second line. This should work:

@media screen and (min-width: 768px) and (max-width: 990px),
screen and (max-width: 630px) {
    .community-info-box {
        width: 100%;
        margin-right: 0;
        float: none;
        ... : ...
    }
}

Upvotes: 14

Related Questions