Main issue: Product cards in a Shopify store vary in height due to title length and sale pricing, and a “see product” button appearing on hover shifts content below. The goal is consistent grid item height on desktop and mobile without layout shifts.
Proposed fixes: Add CSS to theme.scss.css or theme.css to set a minimum height for product titles (around 100–105px) and adjust padding via media queries for screens under 749px. Additional CSS suggestions target hover behavior and pricing: setting min-height and flex alignment for the .product-card .price container, adjusting margin-top for the button on hover, and capping the button’s max-height to prevent pushing content.
Current status: The initial title-height adjustments helped alignment, but the hover button still moves the section below. The latest CSS (min-height on price and button max-height) was reported as not working by the original poster.
Open questions: How to reliably prevent hover-induced layout shifts across products with and without compare-at prices. Another user with the Refresh theme notes there is no theme.css file, seeking guidance on where to place CSS.
Notes: Screenshots are central to illustrating the layout shift and alignment issues.
Hi friends, thanks for the help.
When I move the mouse over the grid and the button appears, it seems that it takes off a little bit down, can you tell me how to raise the button a little? Because when he appears, he moves the things that are down to the bottom.
and in the last product line, this one, could you help me, please?
Thanks @Kinjaldavra @ZestardTech
