Make Rich Text Smaller in Mobile View Only

gabby1989
Tourist
7 0 1

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.

 

Screen Shot 2021-01-23 at 2.21.36 PM.png - this is how it currently looks on mobile view. 

 

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

 

Thanks!!

0 Likes

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

0 Likes
gabby1989
Tourist
7 0 1

@StevenPM 

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

0 Likes

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

0 Likes
gabby1989
Tourist
7 0 1

@StevenPM 

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

0 Likes

Try this instead:

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

Steven

0 Likes
gabby1989
Tourist
7 0 1

@StevenPM 

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

0 Likes

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

0 Likes

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.

Best Regards
MS Web Designer| MS Web International | Task4Store
Contact Us: https://www.task4store.com/pages/contact-us OR task4store@mswebdesigner.com
Was our reply helpful? Please Like or Accept solution
0 Likes