How to align the comparison tab below my product cards

Topic summary

A user is experiencing alignment issues with comparison app tabs appearing below product cards in their Shopify store. The tabs are not properly aligned across different product cards, creating a visually inconsistent layout.

Proposed Solution:

  • Navigate to: Online Store > Themes > Actions > Edit Code > base.css
  • Add CSS code at the bottom of the base.css file:
    • Sets .card__content .card__information to use flexbox with column direction
    • Makes .card__content .card-information fill 100% height

This CSS modification should standardize the card heights and align the comparison tabs consistently across all product cards. A store preview link and screenshots were provided showing the misalignment issue and the suggested code implementation.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.

Hi everyone,

I added a comparison app in my store, but my problem is the alignment of the tabs below my product cards. Is there a way to align these tabs? See photo for reference
Store Preview Link: https://bgtz765ufz7gbbgl-13830324282.shopifypreview.com

Hi @IntechCarl ,

Go to Online Store > Themes > Actions > Edit Code > base.css

Add below code at the bottom of base.css file

.card__content .card__information {
    display: flex;
    flex-direction: column;
}
.card__content .card-information {
    height: 100%;
}

1 Like