Why is half of one media query not working? - css

Question

I've had no issues with any media queries until I tried creating one for large desktop monitors. For some reason only some of the styles in the large device media query work and some don't. It seems the general styles are overriding only some of the large media query, I just don't know why.
I assumed it was in the wrong order and was being overridden, but no matter where I put it (above general styles, below smallest query, above big query), nothing changes. I then saw a suggestion that it needed more specificity, so I tried doing that as well as !important. Still nothing changes. I've checked for misplaced ; and { } but it's all correct.
These are my media queries in order:
General styles not in media query
/* styles that work */
#media only screen and (min-width: 2560px){ /* styles that HALF work */ }
#media only screen and (max-width: 1275px){ /* styles that work */ }
#media only screen and (max-width: 750px) { /* styles that work */ }
#media only screen and (max-width: 600px) { /* styles that work */ }
#media only screen and (max-width: 375px) { /* styles that work */ }
UPDATE: Code sample
PS: Idk who's downvoting everything but it isn't me.
/* General styles that all work */
body {
font-size: 1.8rem;
}
h2{
font-size: 4rem;
}
h3{
font-size: 3rem;
}
.profilePic {
width: 30rem;
height: 30rem;
text-align: center;
border-radius: 50%;
border: var(--primary) 5px solid;
padding: 1%;
}
.typingEffect h1, .typingEffect p {
font-size: 4.5rem;
padding: 0.5rem;
font-weight: bold;
letter-spacing: 0.1rem;
text-align: center;
overflow: hidden;
}
/* Large device media query where some work */
#media only screen and (min-width: 2560px){
body{
font-size: 4rem; /* Works */
}
h2{
font-size: 9rem; /* Works */
}
h3{
font-size: 5rem; /* Works */
}
.profilePic {
width: 100rem; /* Doesn't work */
height: 100rem; /* Doesn't work */
}
.typingEffect h1, .typingEffect p {
font-size: 10.5rem; /* WORKS FOR h1, NOT FOR p */
padding: 5rem; /* WORKS FOR h1, NOT FOR p */
}
}
<header>
<img class="profilePic" src= "./images/orange-Avatar3.svg" alt="Avatar of me"/>
<div class="typingEffect">
<h1 class="name"> Hey, I'm Me</h1>
<p class="tagline"><span className="typed-text"></span><span class="cursor"> </span></p>
</div>
</header>

Answer 1

Ok buddy, I highly recommend going to the Mobile-first design. in order to avoid using max-width. Since order matters and you may end overruling some of the properties you wrote. Check this example out.
div>header>h1 {
font-size: 40px;
color: orange;
}
#media only screen and (min-width: 2560px) {
div>header>h1 {
font-size: 150px;
color: blueviolet;
}
}
#media only screen and (max-width: 1275px) {
div>header>h1 {
font-size: 100px;
color: brown;
}
}
#media only screen and (max-width: 750px) {
div>header>h1 {
font-size: 75px;
color: yellowgreen;
}
}
#media only screen and (max-width: 600px) {
div>header>h1 {
font-size: 50px;
color: coral;
}
}
#media only screen and (max-width: 375px) {
div>header>h1 {
font-size: 125px;
color: red;
}
}
<div class="container">
<header class="">
<h1 class=""> Using Animation! </h1>
</header>
</div>
As you can see every single query is working. But if you swap out the order problems will start to occur therefore you should always be careful when using max-width so you don't end up messing up your code.
Check out this snippet where I messed up the order.
div>header>h1 {
font-size: 40px;
color: orange;
}
#media only screen and (min-width: 2560px) {
div>header>h1 {
font-size: 150px;
color: blueviolet;
}
}
#media only screen and (max-width: 600px) {
div>header>h1 {
font-size: 50px;
color: coral;
}
}
#media only screen and (max-width: 375px) {
div>header>h1 {
font-size: 125px;
color: tomato;
}
}
#media only screen and (max-width: 1275px) {
div>header>h1 {
font-size: 100px;
color: brown;
}
}
#media only screen and (max-width: 750px) {
div>header>h1 {
font-size: 75px;
color: yellowgreen;
}
}
<div class="container">
<header class="">
<h1 class=""> Using Animation! </h1>
</header>
</div>
In the above snippet, the following query didn't even work
#media only screen and (max-width: 600px) {
div>header>h1 {
font-size: 50px;
color: coral;
}
}
#media only screen and (max-width: 375px) {
div>header>h1 {
font-size: 125px;
color: tomato;
}
}
!! Since the code at the bottom is stronger in CSS you will find out the 750px breakpoint is working since it's at the bottom.
#media only screen and (max-width: 750px)
and it is overruling the breakpoints 600px and 375px since they appeared before the 750px breakpoint which is at the bottom of the CSS file.
#media only screen and (max-width: 600px)
#media only screen and (max-width: 375px)
**
I'm sure that your problem is just a CSS Specificity problem
**
That's why the best approach is to go mobile-first and use min-width since it is easier to care for and maintain. I hope my answer has given you a clear understanding of your problem and why your media were not working.

Answer 2

Use max-width instead of min-width for consistency
#media only screen and (max-width: 2560px){ /* styles that HALF work */ }
#media only screen and (max-width: 1275px){ /* styles that work */ }
#media only screen and (max-width: 750px) { /* styles that work */ }
#media only screen and (max-width: 600px) { /* styles that work */ }
#media only screen and (max-width: 375px) { /* styles that work */ }

Answer 3

use min-width instead max-width
when using max-width to this way css media query can't understand your query
When your page is 600px, it is compatible with almost all media queries
bestway:
/* styles that work */
#media only screen and (min-width: 1275px){ /* styles that HALF work */ }
#media only screen and (min-width: 751px){ /* styles that work */ }
#media only screen and (min-width: 601px) { /* styles that work */ }
#media only screen and (min-width: 376px) { /* styles that work */ }
#media only screen and (max-width: 375px) { /* styles that work */ }