What's wrong with this media query?

media queries are unresponsive in current program, have even reused some from a previous page because its for an internal page that shares features, but now they dont work. what’s wrong with how they’re written? example below:

class:

.hero-text {
  color: blue;
  text-decoration: none;
  font-family: papyrus;
  font-size: 1.35rem;
}

what i need the query to do:

@media (max-width: 400px) {
  .hero-text {
    font-size: .5rem;
  }
} 
h4 {
  font-size: 1.1rem;
}
@media (max-width: 400px) {
  h4 {
    font-size: 0.85rem;
  }
}

previously used this and it works perfect…

Your code looks correct to me.

Do you have any ID or inline overrides?

no, i do not use inline and there are no ID settings for my text, they are all in classes.

Can you post your full html and css?

Could we see the entire stylesheet? The added context might give us an idea as to what is happening.

Also, I know this is a silly question, but is the line what i need the query to do: commented out in the actual code?

/* what i need the query to do: */

that parts not in the code only on this page lol so i guess you could say yes

its all quite long, its coming from a full web page with almost 600 lines. you want it all…? :sweat_smile:

That’s a good question. I’ve made headbanging errors like that too many times to admit.

@ZTD try to tag !important into the font-size: .5rem and see if that ‘fixes’ it. It’s bad practice I know, but can help debug some. The code you have should work.

1 Like

you got that right! but hey i think when we look back at those errors, thats a big step to getting better and then we KNOW what not to do. ill give that a go, and at the same time im completely reorganizing my CSS now from this, but i like it a lot more now.

One simple fix is to only use class,
so you won’t have to get your head around selector specificity and only the order from top to bottom becomes relevant.

You cant try to do this way and it’s maybe working …

.hero-text{
font-size : 1.35rem;
}

@media **only screen and** (max-width: 400px) {
  .hero-text {
    font-size: .5rem;
  }
} 

You had it on a h4 selector before. Is still the same selector but with a .hero-text class now?
Do you have a global setting for the h4 somewhere that can possibly override the class?
I think the issue is on inheritance.

check the computed settings for that HTML element on the inspector

the h4 wasnt for the OP actually, it was a copy of another query that i had used on another page that functioned well. more like showing one i wrote that did work to compare to the OP. and ill look up how to do that second part right now.

ok i got the query to work, but now even though it just shrinks the text (as intended) the text is a link in a nav bar and when the query kicks in the clickable link goes dead. in 1.35rem size it works again if i expand the page out of mobile size. having a hell of a time finding anything online for such a strange issue. ill post a link below to the Pen, shrink to about 400px and nav bar goes dead. TYIA :slight_smile:

Thank you for posting a live version :slight_smile: Makes it much easier to see what is going on.

The logo div is covering the first 2 links, but the 3rd one can still be clicked.

image

i see that you have used negative margins in few places (example nav-bar), avoid them as they don’t go very well with a responsive UI.

going the other route had no effect in moving them, alternative?

hmmm thats why i shrank it though…the hell