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)
Hi @AwfulProdDesign
Could you share your store URL to check?
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
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; }
}
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.
Please try to use this code instead.
.accordion .summary__title { justify-content: center; }
Still won’t let me save after inputting that code
Where di you add the code and what issue you are getting?
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;
}
}
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;
}
}
1 Like
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!
1 Like
