Make card background same height

Make card background same height

kirsten11123
Shopify Partner
41 0 14

Hello!

I've coded in a card background for products, however I can't work out how to get them to all be the same height?

I don't want to change font sizes or have the text clipped to ...

 

Also - can anyone work out how to make the product title line height closer together? I tried my usual codes and I couldn't get it!

 

Thanks 🙂

Screen Shot 2024-06-14 at 1.48.51 pm.png

Replies 4 (4)

ZestardTech
Shopify Expert
5624 1024 1352

Hi @kirsten11123 

 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file:

 

 

.product-item__product-title a {
min-height: 50px;
display: block;
}

 

 

ZestardTech_0-1718345153040.png

ZestardTech_1-1718345192348.png

 

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
kirsten11123
Shopify Partner
41 0 14

Thank you, this worked, however now there's a big gap between the product content. Is there a way to center this information to the middle of the card?Screen Shot 2024-06-14 at 4.01.20 pm.png

ZestardTech
Shopify Expert
5624 1024 1352

Hi @kirsten11123 


1.In your Shopify Admin, go to Online Store > Themes > Customize.
2.Select Home page -> Add section -> Featured products

 

ZestardTech_0-1718355029479.png

ZestardTech_1-1718355155745.png

 

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

Rahul_dhiman
Shopify Expert
204 40 37

Hello @kirsten11123 , to increase the card height--->
Go to online store ---------> themes --------------> actions -------------> theme.css----> line number 10143
and replace with

  .product-item__inner:hover, .product-item__inner:focus-within {
        z-index: 1;
        min-height: 420px;
    }

then search----> featured-collection.liquid  and  add this code at the very bottom of the file , with in style tag.

<style>
.featured-collection-slider__product.carousel__slide.swiper-slide.swiper-slide-visible.swiper-slide-next {
    min-height: 420px;
}</style>

 

 let me know if this worked.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here