Beniamino_Baggins Beniamino_Baggins - 10 months ago 42
CSS Question

Media query causing unexpected behaviour

I'm doing some different styling for different screen sizes, based on the bootstrap grid system sizes. For some reason some of the styling is working and some isn't. Here is the css:

@media only screen
and (max-width: 767px) {

div.bm {
display: none;
}

div.br {
height: 40%;
}

div.main-row {
height: 60%;
}

#main-text{
font-size: 3rem;
font-weight: 300;
}
}

@media only screen
and (max-width:991px)
and (min-width:767px) {

div.sm {
display: none;
}

div.main-row {
height: 100%;
}

#main-text{
font-size: 4.5rem;
font-weight: 300;
}

}​

@media only screen
and (min-width:991px)
and (max-width:1999px) {

div.sm {
display: none;
}

div.main-row {
height: 100%;
}

#main-text {
font-size: 5.5rem;
font-weight: 300;
}
}

@media only screen
and (min-width: 1200px) {

div.sm {
display: none;
}

div.main-row {
height: 100%;
}

#main-text {
font-size: 6.5rem;
font-weight: 300;
}
}


It is mainly the
display:none
that are not taking effect, but it seems like the
#main-text
is getting resized correctly. I have a feeling there is a syntax error around the line:

@media only screen
and (min-width:991px)
and (max-width:1999px) {


Because I'm using the css preprocessor stylus, and it's causing this error around that line of code:

ParseError: stylus/monster.styl:40:8
36| font-weight: 300;
37| }
38| }​
39|
40| @media only screen
--------------^
41| and (min-width:991px)
42| and (max-width:1999px) {
43|

expected "indent", got "media"


What is wrong with the code?

Answer

One problem is this:

The first:

@media only screen
  and (min-width:991px)
  and (max-width:1999px)

The segment of pixel-widths here is [991; 1999];

The second:

@media only screen
  and (min-width: 1200px)

The segment of pixel-widths here is [1200; +infinite]

If you take a look at those two arrays of pixel-widths: there are some elements that are included in both media queries: [1200; 1999];

That will result in an error, becase they can't both run, when the condition is true for both of them.

Check for other problems like this.