Products "add to cart" buttons are not aligned

Topic summary

Issue: “Add to cart” buttons in a Dawn theme product grid appear misaligned, especially on mobile. A screenshot was provided and a store link shared for context.

Cause (implied): Uneven product title heights cause product cards to have different heights, pushing buttons out of alignment.

Fix provided (mobile-focused):

  • Steps: Online Store → Theme → Edit code → open base.css → paste at the end and save.
  • Code:
    @media (max-width: 767px){
    .color-background-1.isolate.gradient .card__heading.h5 {
    min-height: 50px !important;
    }
    }
  • What it does: Sets a minimum height for product titles so all cards align and buttons line up on small screens.

Outcome: The fix resolved the original poster’s issue.

Current status: Another participant suspects the same problem on their collections page and shared a link asking for confirmation. No verification or tailored follow-up for that case yet; the thread remains open for that request.

Notes: The solution targets mobile (≤767px). If misalignment persists on desktop or different templates, a similar min-height or grid alignment tweak may be needed with adjusted selectors/breakpoints.

Summarized with AI on January 17. AI used: gpt-5.

Yeahhh! You are welcome @Linnealoquest :blush: