Center aligning "Shop" title in mobile view

[JenniferF]

Hello everyone. I just updated my Dawn theme and noticed the "Shop" title is no longer centered when it is on mobile view. Does anyone know how to fix this? I did a search and found 2 codes, but neither worked. My URL is www.jennszencreations.com

[Made4uo-Ribe · Accepted solution]

Hi @JenniferF 

Check 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:

@media only screen and (max-width:989px){
h2#SectionHeading-template--22812441805081__9fe0cd6c-1203-4988-a68f-ca2a5b621da9 {
    width: 100%;
}
}

And Save. 

Result:

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

[Made4uo-Ribe · Accepted solution]

Yeah sure, sorry late relpy. This is the last post I comment before I went to bed. 

Check this one. Same instruction. 

@media only screen and (max-width: 989px){
.section-template--22812441772313__85b2f02b-3777-4f02-b189-7dea4bda9150-padding h2 {
    width: 100%;
    text-align: center;
}
}

And Save.

Result:

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

[Made4uo-Ribe · Accepted solution]

Hi @JenniferF 

Check 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:

@media only screen and (max-width:989px){
h2#SectionHeading-template--22812441805081__9fe0cd6c-1203-4988-a68f-ca2a5b621da9 {
    width: 100%;
}
}

And Save. 

Result:

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

[JenniferF]

Hello! It worked, thank you so much! I appreciate your help! 😀💜

[Made4uo-Ribe]

Welcome! Thanks for the coffee. 

[JenniferF]

I have one more issue I just found. The "Browse Other Collections" title is now not centered on the mobile view as well. Can you please help me with this too?

[Made4uo-Ribe · Accepted solution]

Yeah sure, sorry late relpy. This is the last post I comment before I went to bed. 

Check this one. Same instruction. 

@media only screen and (max-width: 989px){
.section-template--22812441772313__85b2f02b-3777-4f02-b189-7dea4bda9150-padding h2 {
    width: 100%;
    text-align: center;
}
}

And Save.

Result:

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

[JenniferF]

It worked, thank you so much! 🙏🏽

[Made4uo-Ribe]

Welcome. 😊

[JenniferF]

Hello there! I am currently updating my Dawn theme to 15.0.0 and tried to use the two codes above to center align the text for "Shop" and "Browse Other Collections" titles and the codes are no longer working. I need them centered when it's on mobile view, desktop view is fine. Would you be able to help me with updating the codes?

[JenniferF]

I forgot to mention, I do not have the updated version published. I will wait till you are online.

[JenniferF]

I have the updated version published now. @Made4uo-Ribe

www.jennszencreations.com

[Made4uo-Ribe · Accepted solution]

Hi @JenniferF 

Thank you for waiting. I check it the code still work but it wat called by other codes. 

Check this one.

.title-wrapper-with-link {
    flex-direction: unset !important;
}

And Save. 

Result:

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

[JenniferF]

Hi @Made4uo-Ribe! It worked, thank you so much for your help! 🙂

[Made4uo-Ribe]

Welcome, 😊