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 · Accepted solution]

@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 <br> tags used in description, either those tags are used or enter has been pressed after few lines creating short lines

[niraj_patel · Accepted solution]

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 </body> on theme.liquid
<style>
@media screen and (min-width: 990px) {
   .rich-text__blocks {
      max-width: 100% !important;
   }
}
</style>

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

[niraj_patel · Accepted solution]

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 </body> on theme.liquid
<style>
 .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;
  }
</style>

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

[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 · Accepted solution]

@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 <br> tags used in description, either those tags are used or enter has been pressed after few lines creating short lines

[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! 

[niraj_patel · Accepted solution]

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 </body> on theme.liquid
<style>
 .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;
  }
</style>

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

[suyash1 · Accepted solution]

@RK2024 - add this css too

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

[RK2024]

@suyash1 thanks so much!

[niraj_patel · Accepted solution]

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 </body> on theme.liquid
<style>
@media screen and (min-width: 990px) {
   .rich-text__blocks {
      max-width: 100% !important;
   }
}
</style>

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

[RK2024]

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