My CSS includes 3 media queries that function properly when I resize the browser, but fail to work when using the responsive design tool in the inspector ("toggle device mode") and on mobile devices.
Snippet of my CSS code :
@media screen and (max-width: 1500px) {
body {
width: 100%;
}
}
@media screen and (max-width: 1200px) {
body {
width: 100%;
}
#slider_container {
float: none;
padding-top: 2em;
width: 75%;
display: block;
overflow: hidden;
padding-left: 0px;
margin-left: auto;
margin-right: auto;
}
#slide_desc {
//
width: 30%;
display: block;
float: none;
margin-top: 0;
margin-left: auto !important;
margin-right: auto;
overflow: hidden;
font-size: 1.3em;
color: #353535;
/* line-height: 2em; */
text-align: justify;
font-family: georgia;
width: 80%;
}
}
@media screen and (max-width: 768px) {
#slider_container {
width: 100%;
margin: 0px;
padding: 0px;
padding-top: 1em;
}
#menu_button {
display: block;
width: 2em;
float: right;
margin-top: 0.5em;
margin-right: 2em;
cursor: pointer;
}
#top_menu {
overflow: hidden !important;
height: 3em;
/* background-color: gray; */
}
#top_menu>ul {
margin-top: 3em;
width: 100%;
height: 0;
position: absolute;
z-index: 100;
overflow: hidden;
}
#top_menu>ul>li {
margin: 0;
/* background-color:red !important; */
width: 100% !important;
display: block !important;
}
#top_menu>ul>li>a {
text-align: left;
width: 100%;
margin-left: 0;
padding-left: 1em;
height: auto;
}
#slides_container {
display: none;
}
}
The first two media queries consistently work as expected, however, the third one is not being applied. It seems to only take effect when the browser itself is manually resized to below 768px.
I have checked other related questions about the issue with the usage of !important or incorrect placement of the queries. My media queries are positioned correctly at the end of the file, and it's puzzling why they behave differently based on resizing vs. using the responsive design tools.
If you have any insights into why this discrepancy might be occurring, I would greatly appreciate your input.