Change text box width and justify text on Dawn Theme

Store Design
, , ,

Topic summary

A user seeks to modify text formatting in their Shopify Dawn theme, specifically wanting to:

  • Increase the width of a text box under “Applications of high resolution mapping”
  • Justify text in both this section and the “What is an Orthomosaic?” section above it
  • Align both sections to the same width

Initial Solution Attempt:
One responder suggested adding CSS code to theme.liquid to set .rich-text__blocks.left to 100% width and removing <br> tags. However, this caused the CSS code itself to display as visible text on the page.

Working Solution:
Another user provided CSS code to add to base.css that:

  • Hides <br> tags within rich text elements
  • Sets .rich-text__blocks to 100% max-width on desktop screens

This successfully resolved the width issue.

Remaining Issue:
The original poster still needs help justifying the text in the “What is an Orthomosaic?” paragraph. While text-align: justify worked for the lower section, they cannot determine the correct selector for the upper paragraph.

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

Hello, I am looking for something I thought would be simple but after trying for 2 hours in the CSS file and elsewhere I am at my wit’s end.

I want to simply make the text under “Applications of high resolution mapping” wider and justified. I would also like to justify the text in the section above, under the “What is an Orthomosaic?” section. Ideally the text of the lower section would justify to the same point as the above section. I have included a screenshot to illustrate this.

I’ve tried adding snippets of code to the rich-text.liquid, and the base.css but NOTHING has worked (yes I removed everything that didn’t work after). Please help!

Shopify Help1.png
Shopify Help1.png1919×1032 246 KB

1 Like
2

Hey @cunningham3131

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

After this, just simply remove those
(linebreak) tags from your theme customization and then it should look something like this

RESULT:

Moeed_0-1741810002197.png
Moeed_0-1741810002197.png1323×893 198 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi Moeed, thanks for the swift response. So I added that section of code to the bottom of my theme.liquid, as seen in my screenshot, and removed one of the
from the theme. Removing the break made the text go to the edge of the box, but didn’t effect the box width. Also, for some reason the text “.rich-text__blocks.left { max-width: 100% !important; }” appeared in the bottom corner of the page now… Not sure what I am doing wrong, clearly you did it on your end but I don’t see what there is to mess up here.

Shopify Help2.png
Shopify Help2.png1919×1037 231 KB

Shopify Help3.png
Shopify Help3.png1919×1026 124 KB

Shopify Help4.png
Shopify Help4.png1919×1028 105 KB

4

Hi @cunningham3131

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

.rich-text__text.rte.scroll-trigger.animate--slide-in br {
    display: none !important;
}

@media screen and (min-width: 990px) {
    .rich-text__blocks {
        max-width: 100% !important;
    }
}

Result

DaisyVo_0-1741830756325.png
DaisyVo_0-1741830756325.png1281×597 223 KB

Best

Daisy

5

Awesome, that worked! Thanks!

6

Any idea how to justify the text in the above paragraph? I put “text-align: justify;” in the section we just made the width larger, and it worked, but I can’t figure out how to justify the paragraph above about orthomosaics…