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

Solved

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

TOC-MR
Tourist
30 1 6

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_1-1719494710099.png

 

Accepted Solution (1)

PageFly-Henry
Shopify Partner
1184 335 283

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 12 (12)

techlyser_web
Shopify Partner
1777 330 357

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.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
TOC-MR
Tourist
30 1 6

sure no problem:

https://theonlinecollective.nl/
SHOPIFY2024!

techlyser_web
Shopify Partner
1777 330 357

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>

techlyser_web_0-1719497227242.png

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
TOC-MR
Tourist
30 1 6

don't think it worked for the carousel

 

TOCMR_1-1719497859190.png

 

Made4uo-Ribe
Shopify Partner
6841 1634 2014

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:
  • Made4uoRibe_0-1719496787255.png

     

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
TOC-MR
Tourist
30 1 6

don't think it worked for the carousel

 

TOCMR_2-1719497895969.png

 

TOC-MR
Tourist
30 1 6

 

 

 

 

PageFly-Henry
Shopify Partner
1184 335 283

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

TOC-MR
Tourist
30 1 6

perfect it worked

TOCMR_0-1719500780242.png

 

TOCMR_1-1719500808295.png

 

TOC-MR
Tourist
30 1 6

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

PageFly-Henry
Shopify Partner
1184 335 283

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

you can try with this code

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

TOC-MR
Tourist
30 1 6

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