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

[TOC-MR]

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:

[niraj_patel]

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.

[TOC-MR]

sure no problem:

https://theonlinecollective.nl/
SHOPIFY2024!

[niraj_patel]

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 </body> on theme.liquid
<style>
.card__information {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}

</style>

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

[TOC-MR]

don't think it worked for the carousel

[Made4uo-Ribe]

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
}

• And Save. 
• Result:
• 

[TOC-MR]

don't think it worked for the carousel

[PageFly-Henry · Accepted solution]

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

[TOC-MR]

perfect it worked

[TOC-MR]

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

[PageFly-Henry]

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

you can try with this code

[TOC-MR]

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