Align prices on the collection page and carousel (Trade Theme)

Store Design
, , , ,
1

Hi All,

I’m trying to align the prices on the collection pages and carousels. As you can see, they are currently misaligned. I have tried some css codes I found in various Shopify threads, but they are not working (or I am doing something wrong). Can someone help me with the correct CSS code and a walkthrough to get this resolved?

Thank you in advanced!

Some examples:

TOCMR_0-1719494643332.png
TOCMR_0-1719494643332.png820×456 208 KB

TOCMR_1-1719494710099.png
TOCMR_1-1719494710099.png1142×437 229 KB

1 Like
2

Hello @TOC-MR

would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

3

sure no problem:

https://theonlinecollective.nl/
SHOPIFY2024!

4

Hi @TOC-MR

Check thiso ne.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
.card__information {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}
5

Hello @TOC-MR

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.card__information { display: flex; flex-direction: column; justify-content: space-evenly; }

techlyser_web_0-1719497227242.png
techlyser_web_0-1719497227242.png1144×367 204 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

6

don’t think it worked for the carousel

TOCMR_1-1719497859190.png
TOCMR_1-1719497859190.png1181×364 121 KB

7

don’t think it worked for the carousel

TOCMR_2-1719497895969.png
TOCMR_2-1719497895969.png1181×364 121 KB

8

Hi @TOC-MR

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.card__heading {

min-height: 5vw !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

1 Like
9

perfect it worked

TOCMR_0-1719500780242.png
TOCMR_0-1719500780242.png873×474 235 KB

TOCMR_1-1719500808295.png
TOCMR_1-1719500808295.png1184×382 225 KB

10

@PageFly-Henry one extra question. It worked on dekstop. On mobile not yet. Do you have a solution for mobile?

11

@media (max-width: 767px){
.card__information .card__heading {
min-height: 16vw !important;
}
}

you can try with this code

12

yes it worked. However it’s aligning with the strike price. Not the promo/sale price. Is that something we can change?