Solved

Can you justify text in the Dawn theme on Shopify?

driedfloralart
Tourist
9 0 3

Hi there,

I'm wondering how to jusify the text on my pages in the Dawn theme? I've seen similar questions posted in the forum for other themes, and have tried adding different codes but haven't had any luck. 

My website is https://ferngroveflorals.myshopify.com

Accepted Solution (1)

dmwwebartisan
Shopify Partner
12282 2546 3694

This is an accepted solution.

@driedfloralart 

Please Go to Online Store->Theme->Edit code then go to assets/base.css ->paste below code at the bottom of the file.

.rte>p {
    margin-top: 0;
    text-align: justify !important;
}

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 20 (20)

dmwwebartisan
Shopify Partner
12282 2546 3694

This is an accepted solution.

@driedfloralart 

Please Go to Online Store->Theme->Edit code then go to assets/base.css ->paste below code at the bottom of the file.

.rte>p {
    margin-top: 0;
    text-align: justify !important;
}

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Zworthkey
Shopify Partner
5581 642 1565

Hii, @driedfloralart 
Paste this code on top of the base.css file.

.rte>p {
    text-align: justify !important;
}

Thank You.

driedfloralart
Tourist
9 0 3

Thank you 🙂 

The text on the Pages in the About Menu ("About Us" , "Our Services") looks great, however the text in the product descriptions still appears left aligned. Can this text also be Justified?

I'm also wondering if there's also workaround where I can opt to keep some fields as they were before, namely the Home Page Rich Text Description.

dmwwebartisan
Shopify Partner
12282 2546 3694

@driedfloralart 

Please Go to Online Store->Theme->Edit code then go to assets/base.css ->paste below code at the bottom of the file.

.product__info-container>div {
    margin: 1.5rem 0;
    text-align: justify !important;
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
driedfloralart
Tourist
9 0 3

Thanks - tried this and the text still displays as left aligned in product description. Should I delete the previous Justify code that you recommended?

dmwwebartisan
Shopify Partner
12282 2546 3694

@driedfloralart 

No, Please share screenshot what do you want !

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
driedfloralart
Tourist
9 0 3

 

Essentially I'm looking to have paragraphs of text display as Justified. The below is a screenshot of the text as it appears in the product descriptions - Instead of left aligned I'd like it to display as Justified. I think the code(s) you've given me work really wel for the text on the pages but not for the text in each product description. 

driedfloralart_1-1634821019878.png 

 

 

 

oscprofessional
Shopify Partner
15834 2369 3072

Please add the code in your css file

.product__description.rte div {
    text-align: justify !important;
}

 Hope it will help to solve your issue

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
driedfloralart
Tourist
9 0 3

Just noticed that the product images are now out of alignment, and show the edge of the next product image

 

driedfloralart_0-1634820560424.png

 

oscprofessional
Shopify Partner
15834 2369 3072

Hey @driedfloralart 

You can try this code

media screen and (max-width: 749px) {
.grid--peek .grid__item:first-of-type {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
}

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
driedfloralart
Tourist
9 0 3

Thanks 🙂 Should I first remove the previous codes that I just added? I'm conscious that the more I code I add the more the website speed slows (sorry I don't really know anything about coding 😉

dmwwebartisan
Shopify Partner
12282 2546 3694

@driedfloralart 

for mobile product page image 

Please Go to Online Store->Theme->Edit code then go to assets/base.css ->paste below code at the bottom of the file.

@media screen and (max-width: 749px) {
.product-section .page-width { padding: 0 0rem !important;}
.product__info-wrapper {
    padding-left: 0;
    padding-bottom: 0;
    padding: 0 1.5em!important;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
driedfloralart
Tourist
9 0 3

Thanks - looks better!. Any solutions to the justifying the text in the product description?

dmwwebartisan
Shopify Partner
12282 2546 3694

@driedfloralart 

product description already justified.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
driedfloralart
Tourist
9 0 3

Oh thanks for that - now it is 🙂

driedfloralart
Tourist
9 0 3

RE; When viewed on desktop, the Rich Text on the home page looks out of alignment now (screenshot 1) - would ideally like it to be centered like it was originally whilst keeping the 'description' fields - ie paragraphs - justified (screenshot 2): 

 

Screenshot 1:

driedfloralart_1-1634822339843.png 

Screenshot 2

driedfloralart_3-1634822428338.png

 

 

oscprofessional
Shopify Partner
15834 2369 3072

Okay.
You just need to add this

.rich-text__text.rte p {
    text-align: center !important;
}

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Eri11
Visitor
1 0 0

Hi,

I've got the same issue with the contributor and I tried the code you provided. However, it didn't work for my pages. Please advice if there is any other solution to justify the text on my page in the Dawn Theme 2.0.

 

Thanks,

Screen Shot 2022-05-02 at 8.35.38 am.png 

ElenaB
Visitor
1 0 0

Hello,

is possible use this code only with some page?

Thank you for your kind attention,

Elena

CollagenQueen
Excursionist
35 0 2

Hi, I used your solution (thanks BTW) but it hasn't worked on the mobile version - only the desktop. What do I need to do to get it to justify on both platforms?