What's wrong with this media query?

#1

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;
  }
}
#2 
h4 {
  font-size: 1.1rem;
}
@media (max-width: 400px) {
  h4 {
    font-size: 0.85rem;
  }
}

previously used this and it works perfect…

#3

Your code looks correct to me.

Do you have any ID or inline overrides?

#4

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

#5

Can you post your full html and css?

#6

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: */
#7

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

#8

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

#9

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
#10

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.

#11

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.

#12

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;
  }
}
#13

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.

#14

check the computed settings for that HTML element on the inspector

#15

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.

#16

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:

#17

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

#18

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.

#19

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

#20

hmmm thats why i shrank it though…the hell