When I am in laptop/desktop view, the regular CSS styles are crossed out in the inspect element, and the query styles are active. Why is this happening?
For example, my code for the nav section (where my primary concern was at first, because that's all I've managed to get when targeting certain elements so far, responsively, before I noticed this issue) is below.
I've tried making sure the element names, div's, and id's.. all that are exact. I've also used percentages and pixels, both all the same and interchangeably. I've also made sure that I don't have two identical min-width media queries, that would cancel out one of the two.
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 expected both font sizes to be reduced in size for mobile readability as well as the logo image to be scaled down for better mobile viewing purposes.
You say that your default styles are being overridden on desktop with your mobile styles, and if we inspect your styles, we can see why.
Right after you declare your normal styles, you then include a media query that says min-width: 320px.
.mlAboutSec h1 {
font-size: 40px;
}
@media screen and (min-width: 320px) {
.mlAboutSec h1{
font-size: 20px !important;
}
.img-responsive {
width: 50% !important;
}
}
This means your media query styles will kick in for any screen that is at least 320 pixels wide – even a desktop that is substantially more than that wide. In fact, in reality, your normal styles are never going to be applied because they would only happen between 0 and 319px wide, and even some of the smallest smartphones on the market (e.g., iPhone SE) are 320px wide.
If you want to declare default styles for desktop and override them on mobile, the simplest thing to do would be to simply switch out min-width for max-width in your media query, and nothing else would need changed; everything would work exactly as you expect.
However, I see in the comments that you are going for a mobile-first approach. In that case, you need to invert your entire approach. Your mobile styles would be the default ones, and then your desktop styles would go in a media query.
For example:
.mlAboutSec h1 {
font-size: 20px;
}
.img-responsive{
width: 50%;
}
@media screen and (min-width: 992px) {
.mlAboutSec h1 {
font-size: 20px;
}
.img-responsive{
width: 100%;
}
}
Another thing to note, since I saw discussion in the comments about the possibility of simply moving your media queries to the top of your stylesheet: While it's true that CSS cascades down the sheet, so styles lower down will override styles higher up, that's only true if the selectors for those styles have equal specificity. Media queries are more specific than normal styles and as such will end up overwriting your normal styles whether they're at the top or the bottom of the stylesheet, all else equal. (Which is to say that if you add in an !important or change from .mlAboutSec h1 to .mlAboutSec.someOtherClass h1 or something else, things get more complicated.)
In order to maintain simplicity, I would suggest you keep the media queries at the bottom of the stylesheet or at least immediately following their respective default styles and then use one of the two approaches above to modify things appropriately so things come out as you expect.
Note that in the example I have above of a mobile-first approach, no !important is needed anywhere because the selectors are all exactly the same inside and outside the media query and the media query comes after the default selectors, leaving no disagreement between specificity and the cascade.