Trying out some new styling for different screen sizes based on the bootstrap grid system dimensions. Facing an issue where only certain styles apply while others don't seem to take effect. Here's a snippet of 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;
}
}
The issue seems to revolve around the display:none property failing to work, although the #main-text is resizing correctly. Suspecting a syntax error near this line:
@media only screen
and (min-width:991px)
and (max-width:1999px) {This particular segment of code triggers an error due to the use of the stylus CSS preprocessor:
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"
Can you spot what's causing the error in the code?