Padding issue - rich text

Shopify Discussion

Topic summary

A user is experiencing layout issues with rich text sections on their Shopify Dawn theme store. The primary problem involves rich text content not extending to full width to align with header icons.

Resolution for Desktop:

  • Initial CSS suggestion targeting .page-width and .rte div did not resolve the issue
  • Successful solution provided: Adding CSS to theme.liquid file targeting .rich-text__blocks with max-width: 100% and width: 100% for screens above 750px
  • This successfully extended the rich text to full width on desktop

Outstanding Issue:

  • Mobile version text alignment remains unresolved
  • User requests centered text alignment for mobile devices
  • One responder clarified that text alignment with icons depends on text length, with automatic wrapping creating gaps, but this doesn’t address the mobile centering request

Status: Partially resolved - desktop width issue fixed, mobile centering solution still needed

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

Is someone able to help me stretch my rich text all the way out in line with my header icons?

Thanks so much.

URL: https://admin.shopify.com/store/wss10u-is/themes/175807824166/editor?customCss=true&previewPath=%2Fpages%2Fabout-us&previewMode=fullscreen

Password: ellacoker

Screenshot 2025-01-27 at 11.39.08.png
Screenshot 2025-01-27 at 11.39.08.png3840×2396 569 KB

2

Hi Ellacoker

  • You can try to follow this step
    Step 1: Go to Edit code
    Step 2: Find file base.css and add this code at the end of the file
@media screen and (min-width: 750px) {
   .rte div {
      text-align: left !important;
   }

   .page-width {
      max-width: 95% !important;
   }
}

Result:

LizHoang_0-1737943351109.png
LizHoang_0-1737943351109.png917×424 32.5 KB

Best,
Liz

3

Hi Liz, unfortunately this didnt work. The text alignment is fine. On each page it just doesnt seem to extend the full width. There is a code somewhere which prevents it from extending all the way (to the right). Any other ideas? Thank you

4

Hello @ellacoker , I see you are using DAWN tneme by shopify for your store.

You can add below code by following these steps to make richtext fullwidth

  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: 750px) { .rich-text__blocks { max-width: 100% !important; width: 100% !important; } }

niraj_patel_0-1737948327400.png
niraj_patel_0-1737948327400.png1919×821 76.9 KB

5

hi Niraj, wow thank you so much. That worked. Are you able to solve my other problem too? On mobile version i would like it all centred.

Screenshot 2025-01-27 at 13.30.04.png
Screenshot 2025-01-27 at 13.30.04.png2334×2400 385 KB

6

Hi @ellacoker

I wanted to provide clarification regarding the text alignment with the icon. The text has already been aligned horizontally with the icon. However, it cannot fully extend to both margins because the alignment depends on the length of the following text.

If the text is too long, it will automatically wrap to the next line, leaving a gap at the end of the initial line.

image (27).png
image (27).png1602×782 76.7 KB

Best,
Daisy - Avada Support Team.

7

Hi Daisy, Thank for you clarifying this. I understand. However, do you know how to centre the text on these pages in mobile version?

Ella