Media Query Won't Effect Font Size

Permalink
Hello,

Having problems with font sizing when scaling down the window. If i do for example
@media screen and (max-width: 600px){
h1 {
font-size: 16px;
}
}

This doesn't effect anything onto my site. Any ideas as to why it won't take? Getting frustrated with it.

Thank you

View Replies: View Best Answer
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
Hi ramdettmer,

There are probably other styles with a greater selector specificity that target h1 in your theme. This will prevent your style from taking effect.

More information on selector specificity:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity...
https://css-tricks.com/specifics-on-css-specificity/...
ramdettmer replied on at Permalink Reply
MrKDilkington,

Thanks for all the help. I did include a h2 editing in the customization where clients can change the size, weight, font family, and letter spacing in the design/customization panel for the different headings (h1-h6).
In that case, is there a way to have a media query override that when the screen scales down?
MrKDilkington replied on at Permalink Reply
MrKDilkington
@ramdettmer

You will need to create a more "specific" style.