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

[WhitsEndCasting]

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;

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?

CodeMobileDesktop

[KetanKumar]

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.

[WhitsEndCasting · 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.

[KetanKumar]

@WhitsEndCasting 

Thanks for update.