Force text-overflow: elipsis on product card for mobile? Disable vertical align text desktop?

Solved
Highlighted
Tourist
18 3 8

Third Edit: Solved!

 

 

Second Edit: I figured out how to truncate the product title. I just need help now with forcing it to mobile only.

 

Edit: I figured out the vertical aligned text issue. I still need help with text-overflow: elipsis;

 

Text Align.png

 

Narrative Theme. Trying to force text-overflow: ellipsis; to get an appending ... on mobile version. I'm also struggling to figure out how to disable vertical alignment of text on Desktop Mode for product cards. As you can see, wrapped card info tiles force non wrapped card info to vertically align with the wrapped ones. Any thoughts?

 

 

CodeCodeMobileMobileDesktopDesktop

1 Like
Highlighted
Shopify Partner
7621 1049 2645

Hello, @WhitsEndCasting 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Tourist
18 3 8

This is an accepted solution.

.card__name {
margin: 5px 0;
padding: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 180px;
display: block;

@include media-query($medium-up) {
padding: 0;
white-space: normal;
overflow: hidden;
width: 100%;
}

}

 

Solved it myself.

 

Screenshot_20200912-051104.pngDone.png

1 Like
Highlighted
Shopify Partner
7621 1049 2645

@WhitsEndCasting 

Thanks for update.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes