Change text box width and justify text on Dawn Theme

[cunningham3131]

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! 

[Moeed]

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 </body> tag

<style>
.rich-text__blocks.left {
    max-width: 100% !important;
}
</style>

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

RESULT:

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

Best Regards,
Moeed

[cunningham3131]

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 <br> 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.

   

[DaisyVo · Accepted solution]

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 

Best

Daisy

[cunningham3131]

Awesome, that worked! Thanks!

[cunningham3131]

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...