How to center align collection page text for mobile view on dawn theme?

Solved

How to center align collection page text for mobile view on dawn theme?

Verterra
Explorer
62 1 9

Hi! Does anyone know how to center-align the collection page text for mobile view? The body text is currently not in line with the header. 

Verterra_1-1719999933921.png

 


I have currently tried putting this code under "component-collection-hero.css" but it still doesnt work. I also tried to make the font smaller for mobile view using the css below but it hasnt made any changes. 

Verterra_0-1719999863014.png

 

My store URL is: https://verterra.sg/password, password is VerterraTest123

Accepted Solutions (2)

Moeed
Shopify Partner
4373 1127 1385

This is an accepted solution.

Hey @Verterra 

 

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>
.collection-hero__description {
    max-width: 100% !important;
}
</style>

RESULT:

Moeed_0-1720000257349.png

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Rahul_dhiman
Shopify Partner
244 45 45

This is an accepted solution.

Hello @Verterra 

Go to online store ---------> themes --------------> actions ------> edit code-------> search---> assets -----> component-collection-hero.css -----> line number 71
search this code

.collection-hero__title + .collection-hero__description {
font-size: 0.8rem !important;
text-align: center !important;
margin-top: 1rem;
margin-bottom: 1.5rem;
padding-left: 5 rem !important;
padding-right: 0 rem;
max-width: 100% !important;
}
}

 

and replace with this code.

.collection-hero__title + .collection-hero__description {
font-size: 0.8rem !important;
text-align: center !important;
margin-top: 1rem;
margin-bottom: 1.5rem;
padding-left: 5 rem !important;
padding-right: 0 rem;
max-width: 100% !important;
}
}

 the result will be
18.png


If this was helpful, hit the like button and mark the job as completed.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here

View solution in original post

Replies 5 (5)

Moeed
Shopify Partner
4373 1127 1385

This is an accepted solution.

Hey @Verterra 

 

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>
.collection-hero__description {
    max-width: 100% !important;
}
</style>

RESULT:

Moeed_0-1720000257349.png

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

Rahul_dhiman
Shopify Partner
244 45 45

This is an accepted solution.

Hello @Verterra 

Go to online store ---------> themes --------------> actions ------> edit code-------> search---> assets -----> component-collection-hero.css -----> line number 71
search this code

.collection-hero__title + .collection-hero__description {
font-size: 0.8rem !important;
text-align: center !important;
margin-top: 1rem;
margin-bottom: 1.5rem;
padding-left: 5 rem !important;
padding-right: 0 rem;
max-width: 100% !important;
}
}

 

and replace with this code.

.collection-hero__title + .collection-hero__description {
font-size: 0.8rem !important;
text-align: center !important;
margin-top: 1rem;
margin-bottom: 1.5rem;
padding-left: 5 rem !important;
padding-right: 0 rem;
max-width: 100% !important;
}
}

 the result will be
18.png


If this was helpful, hit the like button and mark the job as completed.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Verterra
Explorer
62 1 9

Thank you, this worked! Do you know how to adjust the font-size, as putting in this code doesnt seem to be affecting the font sizing.

Rahul_dhiman
Shopify Partner
244 45 45

Do you mean font size of this same section.??

 

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Rahul_dhiman
Shopify Partner
244 45 45

Go to online store ---------> themes --------------> actions ------> edit code------->base.CSS
at the very end of the file.

@media screen and (max-width: 749px) {
    #shopify-section-template--22973302014235__banner p {
        font-size: 14px;
    }
}

@media screen and (max-width: 749px) {
    #shopify-section-template--22973302014235__banner h1 {
        font-size: 20px;
    }
}

 

the result will be
19.png

If this was helpful, hit the like button and mark the job as completed.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here