Hello,
In mobile view, I’d like for the text, rating, price, and view product button to be centered and fit within its product, as it looks like it spills over to the next one.
I would appreciate any help!
Topic summary
Mobile product cards show misaligned text, ratings, price, and a “View product” button that overflows into adjacent items; the goal is to center these elements within each card on mobile (and also desktop).
Context: The store owner changed the grid’s “Quick add” (add-to-cart shortcut) to “View product” following a community guide, which led to alignment issues. Store link and password were shared; access was briefly blocked due to too many attempts, then the password was removed for viewing. Screenshots illustrate the misalignment and desired layout.
Proposed fixes:
- One reply suggested adding code in theme.liquid (Shopify’s main layout file) above the closing tag, but the code snippet provided was not visible in the post.
- Another reply proposed a CSS change in Assets/base.css: .card__heading–price { align-items: center !important; } (align-items is a CSS flex property; !important forces the rule to override others).
Actions/Outcome: The owner asked for code to center the button and fix text on both mobile and desktop. No confirmation that the CSS solved the issue yet. Discussion remains open with unresolved alignment of the button and text.
Can you provide me the link to your store?
Please share your store link
https://unfoldesthetics.com/collections/online-courses
Password:rejie
I attempted to do something similar to a quick add. But, I wanted to change quick add to view product instead. So I added this coding according to this person’s instructions.
https://community.shopify.com/post/2089257
The issue I’m having is the button is not centered and the texts are all weird.
https://unfoldesthetics.com/collections/online-courses
Password:rejie
I attempted to do something similar to a quick add. But, I wanted to change quick add to view product instead. So I added this coding according to this person’s instructions.
https://community.shopify.com/post/2089257
The issue I’m having is the button is not centered and the texts are all weird.
I removed the password temporarily for now so you can see.
Hi @unfoldesthetics ,
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Makka
Thank you!
Could you please rewrite another code to just recenter the button and fix the texts basically im trying to set it up like this. Could you please have it be like this for both desktop and mobile? I realize the button isn’t centered on desktop either.
Hello @unfoldesthetics
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.
.card__heading--price {
align-items: center !important;
}