How to format Rich Text section

Store Design
,
1

I want to format my rich text section to be justified.

I also want to have wider margins around it, like shown in the image below:

Tinctoria_0-1722588792157.png
Tinctoria_0-1722588792157.png1918×859 65 KB

Here is a link to the current page I have, and the rich text section I want to format is called ‘Note from our founder’: https://0a272e-93.myshopify.com/pages/about-us

What code can I add to achieve this

2

Hi @Tinctoria

Welcome to Shopify Community.

Please share your store password as well.

Thank you.

Sajat

3

@Tinctoria
Hello I have checked yoursite its password protected so can you please share Store Password

oscprofessional_0-1722591439634.png
oscprofessional_0-1722591439634.png1262×748 17 KB

4

Hi @Tinctoria ,

To format Rich Text section

follow these steps:

1.Go to your Shopify admin panel.

2.Navigate to Online Store > Themes.

3.Find the theme and click on Customize.

4.click Actions > Edit code.

In the left sidebar, under the layout directory, click base.css

.rich-text-description {
    text-align: justify;
    margin: 0 auto;
    padding: 0 15%; /* Adjust this value to control the margins */
    max-width: 800px; /* Optional: Set a max-width for the text block */
}

I hope this helps! If not, please provide password of website.

If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,
Sweans

5

Hi I removed the password protection now so it accessible

6

Hello @Tinctoria

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

#shopify-section-template--17174517645478__8bce3833-93d0-4d63-977e-1fb74bd00e34 .rich-text-content{ text-align: justify !important; }

niraj_patel_0-1722594305971.png
niraj_patel_0-1722594305971.png1002×522 30.4 KB

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

7

Hi @Tinctoria

Thank you for making it accessible.

Please go to Online Store → Themes → Customize

Under Theme Settings (on the left side menu) → Custom CSS, place the following code

.rich-text-description p{
   text-align: justify !important;
   margin-left: 150px;
   margin-right: 150px;
}

You can increase/decrease the margin value according to your taste.

Thank you.

Sajat