My media queries are not working as expected. To illustrate, I have created a simplified example below.
In this example, the "myDiv" div should display:
- "normal width" when no media breakpoints are active
- "mw1200" when the screen has a max width of 1200px
- "mw992" when the screen has a max width of 992px
- "mw768" when the screen has a max width of 768px
However, it currently displays "normal width" when the screen is over 1200px and "mw1200" when below.
.myContainer {
position: absolute;
top: 100px;
left: 100px;
color: #FFF;
background-color: #000;
padding: 10px;
width: auto;
height: auto;
}
.myDiv {
padding-left: 10px;
padding-right: 10px;
}
.myDiv:after {
content: 'normal width';
}
@media screen and (max-width:768px) {
.myDiv:after {
content: 'mw768';
}
}
@media screen and (max-width:992px) {
.myDiv:after {
content: 'mw992';
}
}
@media screen and (max-width:1200px) {
.myDiv:after {
content: 'mw1200';
}
}<div class="myContainer">
<div class="myDiv">
myDiv inside myContainer
</div>
</div>