Re: What is the code to move text to the center of mobile layout
need help coding this to be moved to the center for mobile
Hello @Squeaksss ,
I understand you are looking to move the collection title center in the mobile version.
You can implement this change by adding small CSS code.
Please add the below mentioned code at the bottom of the theme.liquid file before </body> tag and save.
<style>
@media screen and (max-width: 450px) {
.collection__title.title-wrapper.title-wrapper--no-top-margin.page-width.title-wrapper--self-padded-tablet-down {
text-align: center !important;
}
}
@media screen and (min-width: 450px) and (max-width: 701px) {
.collection__title.title-wrapper.title-wrapper--no-top-margin.page-width.title-wrapper--self-padded-tablet-down {
text-align: center;
padding: 0 20% 0 20%;
}
}
</style>
Output will be like this =>
I hope the code helps you.
Please let me know if you have any query.
Thank you.
Hello @Squeaksss ,
I have looked through the store and understand your issue.
You have added unnecessary spacing in your heading text https://prnt.sc/moaY3McUM0Qm , please first remove this spacing from your Heading text field.
Next, Add the below mentioned CSS in your theme.liquid file before </body> tag.
<style>
h2.collage-wrapper-title.inline-richtext.h2.scroll-trigger.animate--slide-in {
text-align: center;
}
</style>
When I temporary remove the code and add CSS code output will be like this -:
I hope it helps.
Thank you,
Hello @Squeaksss ,
I understand you are looking to move the collection title center in the mobile version.
You can implement this change by adding small CSS code.
Please add the below mentioned code at the bottom of the theme.liquid file before </body> tag and save.
<style>
@media screen and (max-width: 450px) {
.collection__title.title-wrapper.title-wrapper--no-top-margin.page-width.title-wrapper--self-padded-tablet-down {
text-align: center !important;
}
}
@media screen and (min-width: 450px) and (max-width: 701px) {
.collection__title.title-wrapper.title-wrapper--no-top-margin.page-width.title-wrapper--self-padded-tablet-down {
text-align: center;
padding: 0 20% 0 20%;
}
}
</style>
Output will be like this =>
I hope the code helps you.
Please let me know if you have any query.
Thank you.
Can you help me center the following text aswell
The link to the site is - https://ebjewelers.store/ THANK YOU
Please remove the spaces that you added in heading of that section
And then add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code
<style>
.collage-wrapper-title {
text-align: center;
}
</style>
Best Regards,
Dan from Ryviu
Hello @Squeaksss ,
I have looked through the store and understand your issue.
You have added unnecessary spacing in your heading text https://prnt.sc/moaY3McUM0Qm , please first remove this spacing from your Heading text field.
Next, Add the below mentioned CSS in your theme.liquid file before </body> tag.
<style>
h2.collage-wrapper-title.inline-richtext.h2.scroll-trigger.animate--slide-in {
text-align: center;
}
</style>
When I temporary remove the code and add CSS code output will be like this -:
I hope it helps.
Thank you,
Community Blog Articles
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025
Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025
Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025