CODEWITHSUNDEEP
cssmedia-queries
Ahmad
Ahmad

Reputation: 13406

Can I use @media in an if/else kind of way?

I have this form placed in the footer of my page (has just one text box and one button). I want to try and apply @media to it, based on the viewport width available ... So for example, in my case the full width this form needs it about 270px or so. So I want to apply CSS to say that:

if the width available is at least 270px
     apply first set of CSS rules
else
     apply second set of CSS rules

How can I do this using @media ?

Upvotes: 50

Views: 44052

Answers (3)

Shanosha
Shanosha

Reputation: 106

Yes. Typically start with your main CSS and then alter the design based on width (or media type) with additional CSS that will overwrite any previous CSS.

<style type=text/css">

/* the main css for the site */
.main-content {width:960px;}


/* the css adjustment for the site between two widths */
@media screen and (max-width:600px) and (min-width:271px) {
    .main-content {width:100%;}
}

/* the css adjustment for the site with a max-width of 270px */
@media screen and (max-width:270px) {
    .main-content {width:260px;}
}
</style>

Upvotes: 7

BoltClock
BoltClock

Reputation: 723578

There's no if/else syntax for @media, so you would need to repeat the same media query in two separate @media rules and use not for one of them to mean "else".

In your case, the media query would be all and (min-width: 270px). (You need to have a media type for not to work; the default is all so I'm just using that.)

Your CSS would then look like this:

@media all and (min-width: 270px) {
    /* Apply first set of CSS rules */
}

@media not all and (min-width: 270px) {
    /* Apply second set of CSS rules */
}

I should add that one popular way is to make use of the cascade by having just one @media rule for overriding styles:

/* Apply second set of CSS rules */

@media all and (min-width: 270px) {
    /* Apply first set of CSS rules */
}

However this falls short if you have any styles outside the @media rule that aren't (or cannot be) overridden inside it. Those styles would continue to apply, and you have no way of undoing them short of actually redeclaring them. Sometimes you cannot undo them by redeclaring them, and that's when you cannot use this method to apply styles. See my answer to this question for a detailed explanation.

In this example, the height: 200px declaration will always apply:

.example {
    width: 200px;
    height: 200px;
}

@media all and (min-width: 270px) {
    .example {
        width: 400px;
    }
}

Of course, if that's not a problem then you can use this in order to avoid duplicating media queries. But if you're looking for a strict if/else construct, then you'll have to use not and a duplicated media query.

Upvotes: 63

Kevin Lynch
Kevin Lynch

Reputation: 24703

This is how you would implement that scenarion

<style>
 // apply second set of CSS rules
@media (min-width: 270px) {
 // apply first set of CSS rules
}
</style>

In this situation the CSS rules applied beforehand would get overwritten when the media query argument is met.

Upvotes: 3

Related Questions