Text alignment on Refresh theme mobile view

[rdyup]

I am having issues keeping my sales price tags aligned straight on my home page and featured collections page. What's The Solution? I've attached some pictures below for reference.

on mobile view. Whats the solution?

[GemPages]

Hello @rdyup 

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

Thank you and hope to hear from you.
Best regards,
GemPages Support Team

[rdyup]

The store url is https://rdyup.co and the password is aushey. Thank you for looking into the alignment issue. Please note the store isn’t ready for placing orders.

[BSS-Commerce]

Hi @rdyup 

To change the style as you want, you just need to change the CSS for your site. You can do it in the following way:

- Go to Online Store > Theme > Edit code

- Then go to the file component-price.css and find the code below:

.price--on-sale .price__sale {
  display: initial;
  flex-direction: row;
  flex-wrap: wrap;
}

- Then replace them with the code below and save:

.price--on-sale .price__sale {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

- We tried and it worked:

I hope that it will work for your site as well.

[rdyup]

Hi their,

It did not work. Some of the prices are still not aligned check url https://rdyup.co/ and password is aushey. The issue is occurring only on mobile view. Thanks for looking into this.

[BSS-Commerce]

Hi @rdyup 

We're sorry for not finding the error in the price that is still not aligned. Can you kindly send us some product photos that still have the price alignment error? We will check it for you.

[rdyup]

[BSS-Commerce]

Hi @rdyup 

We're sorry to ask you again about your text alignment issue. Do you want to align it horizontally or vertically with the product tag? Besides your screenshots, can you give us more details about this problem (for example: can you provide the design images and your expectations?)? This will help us support better.

[rdyup]

I would like the price tags to line up straight under the images for example something similar to how bodybuilding.com has their price tags lining up. I've attached an image of my expectations. Hopefully, this helps you fix the alignment issue.

[BSS-Commerce · Accepted solution]

Hi @rdyup 

Please find this code in the file component-card.css:

.card__heading {
  margin-top: 0;
  margin-bottom: 0;
}

Please replace the code below with the code above:

.card__heading {
  min-height: 30px;
  max-height: 50px;
  margin-top: 0;
  margin-bottom: 0;
}

The above code will add height to the product title, which helps your price tags to align. You can adjust the min-height and max-height as you want.

I hope the above suggestions can help you.

[rdyup]

The price tags have aligned after changing the min-height to 45px and the max height to 55px. Thank you for the assistance.

[rdyup]

rdyup.co and password is aushey

[BSS-Commerce]

Hi @rdyup 

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.