Supply Theme Product Title Alignment

[KawaiiBites]

Hello,

I would love some help/direction on how to align my product titles so they aren't at different levels when scrolling through, this is happening on the homepage and within collections. 

URL www.kawaiibites.com

Any help is much appreciated!

[dmwwebartisan]

Hey @KawaiiBites 

Try this CSS class.

Add code assets/theme.scss.liquid Or assets/timber.scss.liquid bottom of the file

#CollectionSection .grid-uniform {text-align: center;}
.js-qty, .ajaxifyCart--qty {margin: 1em auto;}

Hope this will work for you.

Thanks!

[KawaiiBites]

That didn't work unfortunately, all it did was center the text. 

I will use this though 🙂

[dmwwebartisan]

Hey @KawaiiBites 

Try this CSS class.

Add code assets/theme.scss.liquid Or assets/timber.scss.liquid bottom of the file

#CollectionSection .grid-uniform {text-align: center;}
.js-qty, .ajaxifyCart--qty {margin: 1em auto !important;}
.product-item--price {text-align: center !important;}

Hope this will work for you.

Thanks!

[diego_ezfy · Accepted solution]

@KawaiiBites do this to fix it in 20 seconds

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

@media (min-width: 767px){
    .product-grid-item p{
    height: 50px;
}
}

It will look like this:

Please let me know whether it works.

Kind regards,
Diego

[KawaiiBites]

 @diego_ezfy That worked perfectly!!

Thank you 🙂

[diego_ezfy]

@KawaiiBites you're very welcome!

next time you need feel free to contact me personally, I'll be happy to help.

Kind regards,

Diego 

[Khris-Hunt]

@KawaiiBites Do you mind me asking how you got the quantity selector on each product please? Im also using supply but not seen how that's possible before

[MrDraper]

Hi @diego_ezfy,  I dont have the theme.scss.liquid in my assets folder. Do i create one or is there an alternative? I'm using the turbo chicago theme

[SBI]

Hi I tried your code but it didn't work for me

@media (min-width: 767px){
    .product-grid-item p{
    height: 50px;
}
}

[Rosas]

If I want to do it in home page? What should I include?