Supply Theme Product Title Alignment

Solved
KawaiiBites
Tourist
5 0 0

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

KawaiiBites_0-1598340026514.png

Any help is much appreciated!

0 Likes
dmwwebartisan
Shopify Partner
4461 1003 1278

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!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
KawaiiBites
Tourist
5 0 0

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

I will use this though

0 Likes
dmwwebartisan
Shopify Partner
4461 1003 1278

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!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes

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

dantepw_0-1598342356960.png

 


Please let me know whether it works.

Kind regards,
Diego

 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
KawaiiBites
Tourist
5 0 0

 @diego_ezfy That worked perfectly!!

 

Thank you

0 Likes

@KawaiiBites you're very welcome!

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

Kind regards,

Diego 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
Khris-Hunt
Excursionist
21 0 7

@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

0 Likes
MrDraper
New Member
3 0 0

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

0 Likes
SBI
Tourist
6 0 1

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

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