Ritual Theme, trying to balance the products in mobile view

[ABdev1]

I am trying to make the prices line up with each other on the same line in mobile view, right now it just looks wonky. I have tried adjusting padding with no success.

[devcoders]

Hi @ABdev1

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder

[Dan-From-Ryviu]

You can add this code to Custom CSS in theme settings and check again.

product-card a[ref="productTitleLink"] .text-block {
    min-height: 112px;
}

[ABdev1]

If I do this will it push them to the left or keep them center formatted like I have them?

[tim_1]

I’d suggest this:

.product-card__content :last-child {
  flex-grow: 1;
}

.product-card__content product-price div {
  display: flex;
  align-items: flex-end;
}

Can go into “Custom CSS” of this section, or “Custom CSS” in “Theme setting”(cog icon).

=>

[ABdev1]

@tim_1

.product-card__content :last-child {
  flex-grow: 1;
}

.product-card__content product-price div {
  display: flex;
  align-items: flex-end;
}

Thank you this worked perfectly.