Trying to get the Product and Price on the same line, with Title to left and Price to right, but can’t get it quite right. website=mrs-tee.com
Currently my featured collection and collection list look like:
I would like it to look like:
Topic summary
Main issue: In the Shopify Spotlight theme, the requester wanted product titles left-aligned and prices right-aligned on the same line in featured and collection lists. Long titles wrapped and pushed prices to a new row.
Context: Short titles displayed correctly, but longer titles caused misalignment. Screenshots illustrated the current vs. desired layout and the final result.
Solution: A contributor provided a CSS fix to constrain the title width so the price remains on the same row:
- In the product grid section, set the title element to a fixed width:
#shopify-section-template–19148305760567__product-grid .card__heading { width: 80% !important; } - This allows the price to occupy the remaining space on the right, even with multi-line titles.
Outcome: The requester confirmed the CSS change worked as intended. Status: Resolved; no outstanding questions.
Only for items with short titles. Longer titles (especially ones that take up more than one row) are pushing the price to a new row.
Hello @pgm1878 ,
I have reviewed your store link and shared screenshots.
Please add the below-mentioned CSS code to display the Product title (longer product name) and prices in the same row.
#shopify-section-template--19148305760567__product-grid .card__heading { width: 80% !important; }Output =>
I hope the code helps you.
Please share if you have any queries.
Thank you.
Worked like a charm, thanks!