Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: Add to cart buttons not in line due to different length product names

Solved

Add to cart buttons not in line due to different length product names

fireflydigital
Visitor
2 0 1

Using a third party theme called etools, it is a 2.0 theme

 

Having an issue where the add to cart button is not in line across all the products, this was initally due to different size images so i resized them to resolve. However some are still not in a line because of different product name lengths. 

 

How can i ensure the add to cart button is all in the same line no matter the product name length? It just looks messy with them all on different levels.

 

5EC71B04-B693-427C-98C3-ECB7F59D801C.jpeg

 

Thanks!

Accepted Solution (1)

LitExtension
Shopify Partner
4927 1006 1184

This is an accepted solution.

Hi @fireflydigital,

Go to Assets > component-card.css and paste this at the bottom of the file:

@media (min-width: 480px){
	.card-information__text {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com

View solution in original post

Replies 4 (4)

KetanKumar
Shopify Partner
37618 3670 12162

@fireflydigital 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

eFoli-Trapa
Shopify Partner
182 11 15

Please share your url?

Trapa | EFOLI
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Checkout our apps:Inkybay || MultiVariants

LitExtension
Shopify Partner
4927 1006 1184

This is an accepted solution.

Hi @fireflydigital,

Go to Assets > component-card.css and paste this at the bottom of the file:

@media (min-width: 480px){
	.card-information__text {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com
fireflydigital
Visitor
2 0 1

Thanks so much @LitExtension ! This seems to have sorted it 🙂