Price alignment on featured collection

Store Design
, ,

Topic summary

A user encountered misaligned prices in their featured collection when product names varied in length, affecting both mobile and desktop displays.

Issue Details:

  • Price alignment broke when one product had a longer name than others
  • Problem visible on both mobile and desktop views
  • User unable to share store URL due to client restrictions

Solution Provided:

  • Initial CSS code fixed mobile alignment but not desktop
  • Final working solution applied flexbox properties to .card__content .card__information:
    • display: flex
    • flex-direction: column
    • justify-content: space-between

Outcome:
The CSS fix successfully resolved the alignment issue across all devices. The user confirmed the solution worked perfectly.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

I need to know how to fix the price alignment in the featured collection when one product name is bigger than the other. In my case, I´m having the problem just on mobile but it would be nice to know how to fix it in both cases.

OnlyS_0-1720562386565.png
OnlyS_0-1720562386565.png344×600 198 KB

Thanks.

1 Like
2

Hi @OnlyS

Would you mind to share your store URL? Thanks!

3

Hi @OnlyS

You can try to add this code to Custom CSS in Online Store > Themes > Customize > Theme settings and check again

@media (max-width: 749px) {
.card__content .card__information {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
}
1 Like
4

Actually, I can’t, because of my client rights. :disappointed_face:

5

Hi! thanks for the answer, it works perfectly on mobile, but not in desktop.

OnlyS_0-1720623491240.png
OnlyS_0-1720623491240.png1241×472 528 KB

6

Hi @OnlyS

Please change the cod to this to make it works for both mobile and desktop

.card__content .card__information {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
7

There we go! thanks!!