How can I adjust the mobile header size in a rich text Dawn theme?

[GenericStoreAdm]

Hello again!

I just finished a couple of pages with rich text (large header) but came across a problem.

The text itself is fine on mobile, but the header is too big and stretches over two or even three lines.

I googled for solutions first and came across those two:

https://community.shopify.com/c/shopify-design/how-to-reduce-the-size-of-the-rich-text-header-on-mob...
https://community.shopify.com/c/shopify-design/how-to-change-size-of-a-rich-text-mobile-version-dawn...

Unfortunately none of these work.

My section-rich-text.css is almost default, except for this line at the bottom:

.isolate .rich-text__blocks {
width: 100% !important;
max-width: calc(100% - 10rem);
}

After finding the above mentioned solutions, I tried adding this:

@media (max-width: 749px) {
.rich-text__blocks .h1 {
font-size: 6px !important;
}
}

But as I said, it didn't work. I also tried adding it above the other added block of code instead of below, but that didn't do the trick either.

I should mention that the pages in question do have a custom css I added in the theme editor, maybe that is the issue? It's simply:

h2 {
text-align: center;
}

If that's causing the issue, how do I combine these two?

And if not, what else could be the problem?

Thank you in advance!

[suyash1]

@GenericStoreAdm - can you please share your website link?

[GenericStoreAdm]

Hi @suyash1 

I'll link you to one of the pages in question directly: https://pmls.at/pages/agb

The store is password protected because it's still in construction, but the password is test123?

What I forgot to mention earlier:

When I add this

@media (max-width: 749px) {
.rich-text__blocks .h1 {
font-size: 6px !important;
}
}

but without the ".h1", so this:

@media (max-width: 749px) {
.rich-text__blocks {
font-size: 6px !important;
}
}

it does successfully change the mobile font size, but again only for the text, not the heading.

It's weird that the heading seems unaffected whatsoever.

[suyash1 · Accepted solution]

@GenericStoreAdm - please add this css to the very end of your base.css file and check

@media screen and (max-width:749px){
h2.rich-text__heading {font-size: 16px !important;}
.rich-text__text p{font-size: 12px !important;}
.rich-text__blocks {max-width: calc(100% - 4rem) !important;}
}

[GenericStoreAdm]

@suyash1 thank you so, so much! This works perfectly and just as I imagined.

[suyash1]

@GenericStoreAdm - welcome

[KN2002]

Hi, this solution worked for me - but 1 problem my text is getting a little middle left aligned when I am looking at my phone view