Solved

What is the code to move text to the center of mobile layout

Squeaksss
Tourist
4 0 0

need help coding this to be moved to the center for mobile 

Squeaksss_0-1711424012394.png

 

Accepted Solutions (2)

Anshul_arora
Navigator
380 110 77

This is an accepted solution.

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 =>

Anshul_arora_0-1711449602365.png


I hope the code helps you.

Please let me know if you have any query.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Anshul_arora
Navigator
380 110 77

This is an accepted solution.

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

Anshul_arora_0-1712749731096.png


I hope it helps.

Thank you,

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 9 (9)

Dan-From-Ryviu
Shopify Partner
7721 1502 1510

Hi @Squeaksss 

Could you share your store URL so we can check? 

 

Best Regards,

Dan from Ryviu

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Squeaksss
Tourist
4 0 0
Dan-From-Ryviu
Shopify Partner
7721 1502 1510

Add this code to theme.liquid file after <head>

<style>
@media (max-width: 749px) {
collection__description { text-align: center; }
}
</style>

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Anshul_arora
Navigator
380 110 77

This is an accepted solution.

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 =>

Anshul_arora_0-1711449602365.png


I hope the code helps you.

Please let me know if you have any query.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
Squeaksss
Tourist
4 0 0

Can you help me center the following text aswell 

 

Squeaksss_1-1712621239002.png

 

The link to the site is - https://ebjewelers.store/ THANK YOU

Anshul_arora
Navigator
380 110 77

Hello @Squeaksss ,

Can you kindly share the exact page link in which the mentioned heading text is displayed, as currently I am unable to view it https://prnt.sc/Fg30ITo9fJ4z

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
Squeaksss
Tourist
4 0 0

its posted now on the front page 

https://ebjewelers.store/

Dan-From-Ryviu
Shopify Partner
7721 1502 1510

Please remove the spaces that you added in heading of that section

Screenshot 2024-04-10 at 10.12.28.png

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

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Anshul_arora
Navigator
380 110 77

This is an accepted solution.

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

Anshul_arora_0-1712749731096.png


I hope it helps.

Thank you,

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here