Change text box width and justify text on Dawn Theme

Store Design
, , ,
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…