CSS full width background color for rich text

Store Design
, , ,

Topic summary

A user seeks to extend the background color of a rich text section (“Seaweed Skincare Since 1991”) to full width on wide screens. The section is positioned above the footer on a Shopify store using the Stiletto theme.

Issue: Custom CSS applied to change text color and background doesn’t expand the section to full width.

Solutions Provided:
Multiple community members offered similar CSS fixes targeting the specific rich text section ID:

  • Add max-width: 100% !important; to #shopify-section-sections--22618751451.rich_text.section
  • Insert code either in theme CSS files (base.css, style.css, theme.css) or in theme.liquid above </head>
  • All solutions use the same CSS selector to target only this specific section

Key Clarification:
The user confirmed they want to modify only this particular rich text section, not all rich text elements sitewide. Contributors confirmed the proposed CSS targets only the footer-adjacent section and won’t affect other rich text blocks.

Status: Multiple working solutions provided; awaiting user implementation and confirmation.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Problem - I can’t get the background color of a rich text box to stretch to full width when viewed on a wide screen.

Website URL: https://spatechnologies.com/

Theme: Stiletto by Fluorescent

The rich text section in question is above the footer on every page. The text reads “Seaweed Skincare Since 1991”

The rich text section is placed above the footer. I would like it to look like it’s part of the footer, so I added custom CSS to color the text white and the background blue.

This is the CSS I used:

div {
color: white;
}
.rich-text {
background: #455460;
}

I tried changing the settings from full width to custom but it doesn’t change anything.

Any help would be very appreciated :slightly_smiling_face:

Screenshot-2024-06-04-141158.jpg
Screenshot-2024-06-04-141158.jpg1907×966 109 KB

1 Like
2

Hi @MichelleSpaTech

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

section#shopify-section-sections--22061857145119__rich_text_gmAiQr .rich-text.section {
    max-width: 100% !important;
}

And Save.

Result:

Made4uoRibe_0-1717539547931.png
Made4uoRibe_0-1717539547931.png1835×273 14.4 KB

3

Hi @MichelleSpaTech

This is Garcia from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

#shopify-section-sections--22061857145119__rich_text_gmAiQr .rich-text { max-width: 100%; }

PageFlyGarcia_0-1717551586467.png
PageFlyGarcia_0-1717551586467.png1600×540 100 KB

Hope this can help you.

Best regards,

Garcia | PageFly

4

Hello @MichelleSpaTech ,

I understand you are looking to make the ‘Seaweed Skincare Since 1991’ section full width.

I have reviewed your store and the code you have earlier added.

Please replace the below mentioned code with your existing code or can just add - max-width: 100% !important; before the curly } braces in your code.

Output -:

Anshul_arora_0-1717569967474.png
Anshul_arora_0-1717569967474.png1598×742 58.1 KB

I hope it helps.

Please share if you have any queries.

Thank you.

5

Dear @MichelleSpaTech ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

BSSCommerceB2B_0-1717579381294.png
BSSCommerceB2B_0-1717579381294.png400×195 26.3 KB

Step 2: Search for the file theme.css. And add this code snippet to the end of the file.

.rich-text.section.section--divider-none.section--vertical-padding-top-only {
   max-width: 100% !important;
}

Step 3: Save your code and reload this page:

=> The result:

BSSCommerceB2B_1-1717579567897.png
BSSCommerceB2B_1-1717579567897.png2034×444 34.1 KB

I hope these instructions will help you. If they are helpful, don’t forget to like and mark as the solution.

Have a nice day sir!

6

Will this change the style of all rich text sections on my website, or just this one specifically?

7

NO, It only change this section. Would you like to change all rich text section? Your aim to just align the rich text on the footer right? to look like belong to the footer design.