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
Hey Community! As we jump into 2025, we want to give a big shout-out to all of you wh...
By JasonH Jan 7, 2025
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024