A user encountered an issue where product card text on their Dawn theme remained left-aligned despite setting it to center in the theme settings. The CSS appeared correct but wasn’t applying the chosen alignment.
Root Cause Identified:
GemPages support team diagnosed that the following CSS variable was missing from the base.css file:
--text-alignment: var(--product-card-text-alignment);
Solution Applied:
Rather than re-adding the code to base.css, the user successfully resolved the issue by adding this CSS to card-product.liquid:
.card__information {
text-align: var(--product-card-text-alignment) !important;
}
This fix ensures the product card text alignment now properly reflects the theme settings configuration.
I’ve set my product cards to have centered text alignment, however, they’re appearing left aligned. When I search through the CSS, the styling appears correct (to align it to whatever I’ve assigned in settings). Any ideas are appreciated!
Store: https://manifest-a-pearler.myshopify.com/
Password: pearler
Preview link
Hello @pearlerwork ,
It’s GemPages support team and glad to support you today.
I would like to give you the recommendation to support you so kindly follow the steps below:
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team
Thanks for you help. I should have said earlier - I really don’t want to fix this with code, as I really want it to do what it should be doing and pull the styling from the settings. Perhaps the question I should be asking is, what code is stopping it from rendering it to the setting I’ve input? @GemPages
Hi @pearlerwork ,
You could please open the base.css file and find this code
--text-alignment: var(--product-card-text-alignment);
If it has gone, you could please re-add it then re-check your settings
Best regards,
GemPages Support Team
@GemPages Thanks for identifying this! To fix it, I added the below code to ‘card-product.liquid’
.card__information {
text-align: var(--product-card-text-alignment) !important;
}