topic H1 Media Query Only Works in Rich Text in CMS Development

H1 Media Query Only Works in Rich Text

PSfraga — Wed, 31 May 2023 20:22:37 GMT

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!

Re: H1 Media Query Only Works in Rich Text

Jnix284 — Thu, 01 Jun 2023 01:56:10 GMT

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

Re: H1 Media Query Only Works in Rich Text

PSfraga — Thu, 01 Jun 2023 13:25:36 GMT

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

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

Re: H1 Media Query Only Works in Rich Text

Jnix284 — Fri, 30 Jun 2023 16:14:40 GMT

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

You can try with this updated code:

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.