How to center "You may also like" text in Dawn 11.0 Theme

[JenniferF]

I need help with a code to center the "You may also like text" as well as the "Browse Other Collections" text. I've tried various other codes I found online but nothing is working.

[Made4uo-Ribe · Accepted solution]

Thank you for the information.

Try this one. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

product-recommendations.related-products.page-width.section-template--20291029729561__related-products-padding.isolate.scroll-trigger.animate--slide-in.product-recommendations--loaded h2 {
    text-align: center;
}
.title-wrapper-with-link.title-wrapper--self-padded-mobile.title-wrapper--no-top-margin {
    justify-content: center;
}

• And Save.

• Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[dreamtechzone_5]

You can do this without coding. It can be done by following.

[JenniferF]

I tried it and it's not working

[dreamtechzone_5]

Have you put it in the center?

[JenniferF]

there is no option for "Rich text"

[Made4uo-Ribe]

Hi @JenniferF 

Would you mind to share your Store URL website? with password if its protected. Thanks!

[Made4uo-Ribe · Accepted solution]

Thank you for the information.

Try this one. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

product-recommendations.related-products.page-width.section-template--20291029729561__related-products-padding.isolate.scroll-trigger.animate--slide-in.product-recommendations--loaded h2 {
    text-align: center;
}
.title-wrapper-with-link.title-wrapper--self-padded-mobile.title-wrapper--no-top-margin {
    justify-content: center;
}

• And Save.

• Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[JenniferF]

It worked, thank you so much!!! 🙂

[JenniferF]

Hello. You helped me with this a while back. I'm in the process of updating my theme and adding codes back into it before publishing. I tried adding the code above and it's no longer centering the text. Can you please help me with another code?

[Made4uo-Ribe]

Did you make another theme? or you just updated the version? Would you mind to share the updated version of your store? Thanks!

[JenniferF]

It's an updated version. I just published it. URL is jennszencreations.com

[Made4uo-Ribe]

Oh, Okay check this code. Same Instruction. 

product-recommendations.related-products.page-width.section-template--22358788669721__related-products-padding .card__information * {
    text-align: center;
}

.collection-list-wrapper.page-width.isolate.no-mobile-link.section-template--22358788473113__85b2f02b-3777-4f02-b189-7dea4bda9150-padding .card__information {
     text-align: center;
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[JenniferF]

Hello. I don't need the product info centered. I need the text "You may also like" and "Browse Other Collections" centered.

[Made4uo-Ribe · Accepted solution]

Oh, Sorry. I didnt read it right. Check this one. 

h2.related-products__heading.inline-richtext.h1 {
    text-align: center;
}
.title-wrapper-with-link {
    justify-content: center;
}

And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[JenniferF]

No worries. It worked, thank you so much! I appreciate your help! 🙏🏽💜

[JenniferF]

I just realized the "Browse Other Collections" title is not centered anymore either.