H1 Media Query Only Works in Rich Text

[PSfraga]

Hi,

I'm trying to add media queries for our H1 to adjust the font size based on display; however, I can't get it to work when utilizing the Heading module. It only works when I add the H1 using the Rich Text module. Is there any downside going that route?

Thanks!

[Jnix284]

@PSfraga no downside for using the rich text module over the heading module, but it sounds like you just need to extend the code you've added so it includes the heading module.

Do you have a public page link and/or can you share the CSS you've added?

[PSfraga]

Thanks! I removed the CSS but this is what I was using. Any suggestions would be appreciated!

<style>
@media (max-width: 400px) {
h1 {
font-size: 14px;
}
}

@media (min-width: 400px) {
h1 {
font-size: 30px;
}
}</style>

[Jnix284]

Hi @PSfraga , I apologize for the delayed response, I was out of office unexpectedly.

You can try with this updated code:

<style>
@media screen and (max-width: 400px) {
h1 {
font-size: 14px;
}
}

@media screen and (min-width: 400px) {
h1 {
font-size: 30px;
}
}</style>

Another option would be to add !important to make sure your overwrites apply above any others.

font-size: 30px !important;

If that doesn't work, I would need a link to see how it's coded to understand why it's not working.