Design issue on desktop where visual “effects” for the 2nd and 3rd cards appear misaligned below the cards; mobile view displays correctly. A desktop screenshot and a mobile image link were provided to illustrate the discrepancy.
Diagnosis: The card description area doesn’t extend to full card height on desktop, causing uneven card heights and misplacement of the effects. When the description spans three or more lines, the effects align correctly, confirming height inconsistency as the root cause.
Suggested approach: Use CSS to make the description/text block fill the card’s full height (equalize card heights), applying a suitable selector. A reference to a similar Shopify Dawn theme solution was shared for guidance.
Constraints: Without access to the store/theme code, precise selectors and implementation details can’t be provided.
Status and next steps: Issue identified but not fully resolved in-thread. Next actions are to implement CSS that enforces consistent card heights on desktop (e.g., full-height text container) and test across cards. No final code snippet was confirmed in the discussion.
Hi I use GenAi for my designs. the 2nd and 3rd cards effects are misplaced. What code do i edit or insert for them to be properly placed below the cards. In the mobile view they look fine and not missplaced. it is only on desktop.
Desktop:
Mobile: Imgur: The magic of the Internet
Looks like the issue is with the height of the description part. It does not go all the way down. Backup and ask AI to make that part or whole text block to fill the space full height.
You can try similar code like this, but with a different selector.
Without sharing your store, there is not much we can do else.
Hi, it turns out you are right. the issue is with the description. If the text is three lines or more the effects goes all the way down.
