Make Rich Text Smaller in Mobile View Only

[gabby1989]

Hi!

In mobile view, the rich text is too big and it is broken into several lines. Is there a way to make it onto two lines instead of four? I'm using the Brooklyn template. I tried changing sizes but then it made it way too small in desktop view.

 - this is how it currently looks on mobile view. 

Here is my preview link https://pf8w8apc1fnzrg8f-52847182000.shopifypreview.com

Thanks!!

[StevenPM]

Hi there,

Are you familiar with where to edit code for your theme?

It might be possible to provide code for you to test.

Steven

[gabby1989]

@StevenPM 

Yes, I've changed codes for other things. I assume it would go under theme.liquid?

[StevenPM]

Try this:

@media screen and (max-width: 800px) and screen { .index-sections .feature-row .rte-setting p { font-size: 18px; } }

And place it at the end of your theme.scss.liquid

Steven

[gabby1989]

@StevenPM 

It made it smaller, but it distorted my desktop view and everything else in my mobile view.

[StevenPM]

Try this instead:

@media only screen and (max-width: 800px) { .index-sections .feature-row .rte-setting p { font-size: 18px; } }

Steven

[gabby1989]

@StevenPM 

That changed the size of my images with text, not the rich text.

[StevenPM]

Sorry about that, I thought it was all multiple rich text you wanted to change.

Try this instead:

@media only screen and (max-width: 800px) { .index-sections .rich-text-section .rich-text .rte.rich-text__text--large p { { font-size: 18px; } }

Steven

[MS-WEB-DESIGNER]

Dear @gabby1989 

Hope the following suggestion will help you

• From your Shopify admin, go to Online Store > themes.
• Locate your current theme and then click Actions > Edit code.
• After that in the Assets folder, click to open your theme.scss.liquid file.
• Go to the very bottom of this file and paste the following code:

/* Start */
@media screen and (max-width: 768px) {
.template-index  .feature-row__item .featured-row__subtext { font-size: 18px; }
}
/* End*/

• Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
• Save and check your theme by refreshing it.

If you still need help you can contact us by using the link or email given at signature.