Hello Everyone,
I have an issue where the height of my card footer has a gap on larger screen sizes. How can I make this seamless across all screen desktop screen sizes? images below
https://2d26b3.myshopify.com/collections/all
PW: reishi
Topic summary
Issue: On larger desktop screens, the product card footer shows a visible height gap in a Shopify collection grid. The OP provided a storefront link with password and comparison images (correct vs. incorrect), which are central to understanding the visual discrepancy.
Most relevant update: A contributor identified a CSS rule setting height to 6.5vh in Assets > app.css and advised changing it to 6vh. After saving, their screenshot shows the card footer aligning properly without the gap.
Notes:
- vh (viewport height) sets element height relative to the browser window height; small changes can affect alignment across screen sizes.
- This fix targets a specific height value; no selector name was provided in the thread, but the change was made in app.css where the 6.5vh rule appears.
Alternative suggestion: Another participant proposed adding custom code to theme.liquid above , but the actual code snippet was not included in the post, making that approach incomplete as documented.
Status: The CSS height adjustment appears to resolve the issue per shared results, but the OP has not confirmed final resolution.
1 Like
Check this one.
Go to edit code > Asset > app.css folder > and find the code below.
The height is 6.5vh now remove the .5 like this.
Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the
Hope this can help you solve the issue
Best regards,
Richard | PageFly