Shopify themes, liquid, logos, and UX
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?
Solved! Go to the solution
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.
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.
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.
Thanks for update.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024