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

[AwfulProdDesign]

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)

[Dan-From-Ryviu]

Hi @AwfulProdDesign 

Could you share your store URL to check?

[AwfulProdDesign]

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]

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; }
}

[AwfulProdDesign]

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]

Please try to use this code instead.

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

[AwfulProdDesign]

Still won't let me save after inputting that code

[Dan-From-Ryviu]

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

[AwfulProdDesign]

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 · 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;
}
}

[AwfulProdDesign]

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]

You are very welcome!