Text alignment on Refresh theme mobile view

Shopify Discussion

Topic summary

A Shopify store owner using the Refresh theme is experiencing misaligned sale price tags on mobile view for their homepage and featured collections page. The prices appear staggered rather than aligned horizontally beneath product images.

Initial troubleshooting attempts:

  • BSS-Commerce first suggested modifying CSS in component-price.css, changing the .price--on-sale .price__sale display properties from flex-direction: column to flex-direction: row
  • This solution did not fully resolve the alignment issue

Final solution:

  • After clarifying the user wanted prices aligned horizontally under product images (similar to bodybuilding.com), BSS-Commerce identified the root cause
  • The fix involved editing component-card.css by adding minimum and maximum height constraints to .card__heading
  • Setting min-height: 45px and max-height: 55px standardized the product title heights, which in turn aligned the price tags below them

Outcome: Issue resolved. The user confirmed the price tags now align properly after implementing the height adjustments.

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

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
![view (48).png|1702x804](upload://uiZiU5MPd2yzeGctemKLqQQlvfr.png)
  • 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:

view (49).png
view (49).png524×959 294 KB

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