Size and low stock text will not center on mobile even with align text set to center...

Solved

Size and low stock text will not center on mobile even with align text set to center...

AwfulProdDesign
Tourist
6 0 1

No matter what I try and do with align-text or anything else, size and low stock text both refuse to center no matter what on Dawn. Anyone know how to get this to work for mobile only... I noticed that for size specifically after disabling pay Shop Pay Installments which I'm not eligible for apparently right now it refuses to center.

 

Haven't been able to find anything regarding low stock but inspected page and got the name for it, but no amount of code will also center it no matter what I try (align-text, align-content, align-items, etc)

 

willnotcenter.PNG

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
8532 1682 1692

This is an accepted solution.

Please change the code to this and try to save again 

@media (max-width: 767px) {
.product {
font-size: 14px !important;
text-align: center;
}
quantity-input.quantity {
margin: 0 auto !important;
}
variant-radios {
text-align: center;
}
.accordion .summary__title,
.product__inventory {
justify-content: center;
}
}

- Helpful? Like and Accept solution to let me know or Buy me 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.

View solution in original post

Replies 11 (11)

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

Hi @AwfulProdDesign 

Could you share your store URL to check?

- Helpful? Like and Accept solution to let me know or Buy me 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.

AwfulProdDesign
Tourist
6 0 1

https://amongstla.com/products/the-everyday-tee

 

It also won't let me save changes I made centering product text and contents... ideally every single element is centered from quantity to size, collapsible rows and text. Not sure why in 2024 we can even get a basic button to center text for mobile but here we are

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

Please add this code to your Custom CSS in Online Store > Themes > Customize > Theme settings 

@media (max-width: 749px) {
variant-radios { text-align: center; }
.product__inventory { justify-content: center; }
}

- Helpful? Like and Accept solution to let me know or Buy me 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.

AwfulProdDesign
Tourist
6 0 1

That works in isolation, thanks! But it will not let me save my code when I add in this for the collapsible rows:

 

.product__accordion .summary__title {
justify-content: center !important;
}

 

Do you know how to fix that? Size one is still incorrectly justified.

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

Please try to use this code instead.

.accordion .summary__title { justify-content: center; }

 

- Helpful? Like and Accept solution to let me know or Buy me 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.

AwfulProdDesign
Tourist
6 0 1

Still won't let me save after inputting that code

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

Where di you add the code and what issue you are getting?

- Helpful? Like and Accept solution to let me know or Buy me 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.

AwfulProdDesign
Tourist
6 0 1

Here's the current full code inputting into the CSS section of the product information "custom CSS" section:

 

@media screen and (max-width: 767px) {
.product {
font-size: 14px !important;
text-align: center;
}
quantity-input.quantity {
margin: 0 auto !important;
}
variant-radios {
text-align: center;
}
.product__inventory {
justify-content: center;
}
.accordion .summary__title {
justify-content: center;
}
}

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

This is an accepted solution.

Please change the code to this and try to save again 

@media (max-width: 767px) {
.product {
font-size: 14px !important;
text-align: center;
}
quantity-input.quantity {
margin: 0 auto !important;
}
variant-radios {
text-align: center;
}
.accordion .summary__title,
.product__inventory {
justify-content: center;
}
}

- Helpful? Like and Accept solution to let me know or Buy me 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.

AwfulProdDesign
Tourist
6 0 1

Literal lifesaver, it worked! I also tested the size issue on my phone and it seems to be displaying as centered, so it looks like Shopify's mobile preview is just incorrect on that. Thank you so much!

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

You are very welcome! 

- Helpful? Like and Accept solution to let me know or Buy me 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.