Adjusting the width of rich text container

Store Design

Topic summary

A user seeks to narrow a specific rich text container on their Shopify homepage.

Three CSS-based solutions were provided:

  1. Edit theme’s base.css file directly:

    • Navigate to Online Store → Themes → Edit Code
    • Locate base.css in the assets folder
    • Add CSS targeting the rich text wrapper with max-width: 80% (adjustable percentage)

  2. Use Custom CSS in the rich text section:

    • Apply max-width: 1000px and margin: 0 auto to .rich-text__wrapper
    • Includes a screenshot reference for visual guidance

  3. Responsive approach with media queries:

    • Set max-width: 80% for desktop
    • Use @media (max-width: 600px) to apply max-width: 100% for mobile devices
    • Centers container with margin: 0 auto

All solutions target the .rich-text__wrapper class but differ in implementation method and responsiveness. The issue remains open with multiple viable options presented.

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

Hi, I am trying to make the specific rich text container on the homepage more narrow… here is the link
https://1d9ed8-ee.myshopify.com/

2

Hi, this is really easy to do just follow the below instructions!

  1. Go to ‘Online Store’ → Themes

  2. From your active theme click on the 3 dots(…) → Edit Code

  3. Inside the assets folder, locate the file ‘base.css’

  4. At the end of the file paste the below code

.rich-text__wrapper.rich-text__wrapper--template--15352363024439__rich_text_7pfxKr .rich-text__content{
   max-width: 80% /* The lower the percentage the narrower the rich text. Adjust according to your preferences */
}
3

Hi @selwilton

You can do that by adding this code to Custom CSS of that rich text section

.rich-text__wrapper {
max-width: 1000px;
margin: 0 auto;
}

Screenshot 2024-07-17 at 09.13.46.png
Screenshot 2024-07-17 at 09.13.46.png1369×584 66.8 KB

1 Like
4

Hi @selwilton

You can use the following code to resize the rich text container. You can set the size based on your requirements for desktop and mobile using the code below.

.rich-text__wrapper {
    max-width: 80%;
    margin: 0 auto;
}
@media(max-width: 600px) {
    .rich-text__wrapper {
        max-width: 100%;
    }
}

Thanks

1 Like