When I switch to laptop/desktop view, the regular CSS styles are being overridden in the inspect element, and the query styles are taking precedence. Can anyone explain why this is happening?
For instance, let's take a look at the code for the nav section (which was my main focus initially, as it was the only part I had managed to style responsively before encountering this issue).
I have double-checked that all the element names, divs, and ids are correct. I have tried using percentages and pixels, both individually and together. I have also confirmed that there are no duplicate min-width media queries that could be causing conflicts.
CSS
/* Nav Section */
a.navbar-brand{
font-size: 90% !important;
}
/* About Section */
.mlAboutSec{
padding: 112px 0;
background-color: #f9f9f9;
}
.mlAboutSec h1{
font-size: 40px;
}
@media screen and (min-width:320px){
.mlAboutSec h1{
font-size: 20px !important;
}
.img-responsive{
width: 50% !important;
}
a.navbar-brand{
font-size: 90% !important;
}
}
Html
<div class="mx-auto order-0">
<a class="navbar-brand" href="#">Sample Logo Text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="jumbotron jumbotron-fluid text-center">
<img src="LogoImage.png" class="img-responsive" alt="Logo Image">
</div>
<div class="col-sm-8 fadeInUp animate">
<h1>About Section</h1>
<p>Sample Text Description about stuff goes here for the reader to view.</p>
</div>
I was expecting the font sizes to decrease for better mobile readability, and for the logo image to be resized for optimal viewing on mobile devices.