multiple media queries not working

Question

hey guys I don't quite get multiple media queries. here is what I mean

html code:

<div class="container">
    <div class="jumbotron">
        <h1 id ="jumbo_text">{% block jumbo_text1 %} {% endblock %}</h1>
        <h2 id ="jumbo_text2">{% block jumbo_text2 %} {% endblock %}</h2>
    </div>
</div>

css code:

@media only screen and (min-width: 200px) and  (max-width: 767px) {
    .jumbotron {

        display: none;
    }
}   

@media only screen and (max-width: 768px){
    .jumbotron {

        height: 200px !important;
        width:300px;
        background-image: url("../../img/jumbo_pics/bbj_class.jpg");
    }

}

basically the second media query works but the first one doesn't. why?

in pseudocode:

devices that are at minium 200px and maximum 360px dont show jumbotron

devices above 360px but below 768px show jumbotron with height of 200px and width of 300px

Im really confused between max-width and min-width too

does max-width mean a device whose width is at max n and therefore all sizes below n the style applies?

and does min-width mean a device whose width at minimum is n and all the sizes above n the style applies?

am I getting that right?

to wrap this up:

how to do multiple media queries with different ranges?
is my understanding of min-width and max-width correct?

score 5 · Answer 1 · edited May 23 '17 at 11:50

The second media query appears later in the stylesheet, so it takes precedence. Since, you mentioned max-width:767px and max-width: 768px in both cases, they are overlapping in the range 200-768px and hence the second one which appears later has taken affect.

devices above 360px but below 768px

You only mentioned max-width right? Min-width has not taken affect here. Media "screen" is a restriction on the device viewing the page, which in this case happens to be devices mostly other than "print".

There is a good discussion on media-queries here and here.

Also, media queries have the same specifity as other css rules. So, dont expect media query to take precedence over a css rule with same selectors, unless it appears later.

So, a good way to solve your problem would be to write it in this fashion.

.jumbotron{
/*for other device sizes
write styles here */
}

@media only screen and (min-width: 200px) and  (max-width: 360px) {
    .jumbotron {
            display: none;
    }
}   

@media only screen and (min-width:361px) and (max-width: 768px){
    .jumbotron {
        height: 200px !important;
        width:300px;
        background-image: url("../../img/jumbo_pics/bbj_class.jpg");
    }

}

And your understanding of min-width and max-width is correct, however its always a good idea to use both of them in a media-query to ensure that ranges dont overlap and you end up with a rule which is not desirable.

can you show me a code snippet to visualize the correct way of doing it? — Zion, Oct 15 '15 at 02:11
ok so like in relation to the pseudocode in my post to write that in css how would that look like? — Zion, Oct 15 '15 at 02:16

multiple media queries not working

1 Answers1