CMS Development

PSfraga
Member

H1 Media Query Only Works in Rich Text

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!

0 Upvotes
3 Replies 3
Jnix284
Hall of Famer | Elite Partner
Hall of Famer | Elite Partner

H1 Media Query Only Works in Rich Text

@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?

 


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin

0 Upvotes
PSfraga
Member

H1 Media Query Only Works in Rich Text

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
Hall of Famer | Elite Partner
Hall of Famer | Elite Partner

H1 Media Query Only Works in Rich Text

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.

 


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin

0 Upvotes