Solved

Dawn Theme - Rich Text - Mobile Header

GenericStoreAdm
Tourist
10 0 2

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!

Accepted Solution (1)
suyash1
Shopify Partner
8982 1115 1462

This is an 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;}
}

 

suyash1_0-1707311269860.png

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me

View solution in original post

Replies 5 (5)

suyash1
Shopify Partner
8982 1115 1462

@GenericStoreAdm - can you please share your website link?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
GenericStoreAdm
Tourist
10 0 2

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
Shopify Partner
8982 1115 1462

This is an 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;}
}

 

suyash1_0-1707311269860.png

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
GenericStoreAdm
Tourist
10 0 2

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

suyash1
Shopify Partner
8982 1115 1462

@GenericStoreAdm - welcome

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me