Price alignment in mobile and computer

Ask & Offer

Topic summary

A user encountered product price alignment issues in their Shopify store using the Trade theme. While prices aligned horizontally on desktop, they appeared misaligned on mobile devices and narrower browser windows.

Problem Details:

  • Desktop view showed proper alignment
  • Mobile and responsive views displayed prices vertically stacked or misaligned
  • User had previously applied fixes for desktop only

Solution Provided:
Two community members offered CSS solutions targeting mobile viewports (max-width: 767px):

  • Add custom CSS to theme.liquid file (above closing tag)
  • Set minimum height for .card__heading or .card-wrapper .card__heading elements
  • Values suggested: 19vw or 40px

Outcome:
The issue was successfully resolved. The user confirmed the solution worked and thanked the contributors. Both solutions involved media queries to ensure consistent horizontal price alignment across all device sizes.

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

Hello everyone,
I use trade theme in my store. how can i make the price stay in same line. I did something before to make the price stay in same line when its in computer size, but it didnt change how it presents in mobile. please see the image

computer
computer836×530 238 KB

here is how it looks in mobile :

mobile
mobile395×422 77.3 KB

then i noticed it looks like this when i narrow the page in computer (its not horizontal align) :

computer 2
computer 2807×576 275 KB

anyone can help me to modify this ? I want it stay horizontally aligned no matter what . Thank you in advance .

Amy

1 Like
2

Can you please share the store Url

3

Hello Mian, here it is.

1 Like
4

Hey @Am01

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (max-width: 767px) {
.card-wrapper .card__heading {
    min-height: 19vw !important;
}
}
</style>

RESULT:

image
image373×667 53.9 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

2 Likes
5

Hey @Am01,
Thanks for Bringing this Question to Shopify community.
In order to align the product price horizontally you need to follow these steps.
Go to Shopify Admin >> Online Store >> Edit Code >> base.css.
Go to the end of base.css file and paste the following code.

@media only screen and (max-width: 767px) {
.card__heading {
    min-height: 40px !important;
}
}

Results:

image
image573×778 90.5 KB

6

it works ! Thank you so much ! :hugs:

1 Like
7

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

2 Likes
8

Thank you so much. the problem solved . Thank you for your effort :slight_smile:

9

You are most Welcome :slight_smile: