How to adjust the width of the rich text section in the Refresh theme?

[RK2024]

Hi Shopify Community,

I have added a new Rich Text block on my Shopify store page, Refresh theme, and the text is quite narrow and I would like to widen it. I have searched for solutions on this forum but none of them has worked so far, like adding CCS codes in theme.liquid or changing rich text blocks in section-rich-text.ccs (they are for different themes). Can someone please advise me how I can do it? Thanks a lot in advance.

[suyash1]

@RK2024 - Can you please share this page link?

[RK2024]

@suyash1 thank you. The link below. The rich text I want to widen starts from ‘Welcome to our online…’.

https://besthair.co.nz/

[suyash1]

@RK2024 - 2 things

1] css needs to be set at 100 rem for your text, please add this css to the very end of your base.css file and check,

Shopify Admin → Online Store ->Theme → Edit code → base.css

@media screen and (min-width: 990px) {
    .rich-text__blocks {max-width: 100rem;}
}

2] remove the
tags used in description, either those tags are used or enter has been pressed after few lines creating short lines

[niraj_patel]

Hello @RK2024

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (min-width: 990px) { .rich-text__blocks { max-width: 100% !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[RK2024]

@suyash1 thanks so much, that worked! Also, do you know by any chance how I can reduce the font size in this rich text? There is quite a bit of this text to scroll down and I want to keep all text for the SEO purpose, but could potentially reduce the font. And also, I have just changed scheme colour to fit my branding colours - do you know how to change the clickable links colour from dark blue to white in this rich text? Currently they are hardly visible.

Thanks again for your help!

[RK2024]

Thank you @niraj_patel , your advise also worked, thank you.

[niraj_patel]

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

.rich-text__blocks .rich-text__text.rte.scroll-trigger.animate--slide-in p { font-size: 19px !important; } .rich-text__text.rte.scroll-trigger.animate--slide-in p a { color: #fff !important; text-decoration: none !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[suyash1]

@RK2024 - add this css too

.rich-text__blocks p {font-size: 14px;}
.rich-text__blocks a{color:#fff !important;}

[RK2024]

@suyash1 thanks so much!