Cut product title short on product card

[ads18922]

hello, this is quite hard to explain so ive attached two pictures to help you understand it. Basically I want the title of my products on my card to be cut short (only the long names which run onto a new line). Below is a picture of my store:

This is my store, i want the “BROOKLYN” product title to be shortened so it runs off the page so that the product prices are in line with each other (currently the £56.00 is on a different line to £52.00 which I think looks ugly). The next image is what i want my store to look like:

With this store, the product name is cut short also with 3 dots so that it doesn’t go onto a new line. This is what i want to do to my store. Any questions, please ask as i feel like that was very confusing to explain

my theme is dawn, website url is qmpryp-cx.myshopify.com , password is chasha

[Abdosamer]

Hi @ads18922 , go to base.css file and add the following code to the end of it :

@media(max-width:799px){
.full-unstyled-link {
    text-decoration: none;
    color: currentColor;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 170px;
}

}

Result:

[Dan-From-Ryviu]

Hi @ads18922

If you want to make price in the same place, please code to Custom CSS in Online Store > Themes > Customize > Theme settings instead of limiting text of the product title.

.card--standard>.card__content .card__information {    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

[DaisyVo]

Hi @ads18922

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

a.full-unstyled-link {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 170px;
    padding-inline: 6px;
}

Here is the result: https://prnt.sc/NQqcF8zyp_Bp

I hope this helps

Best,

Daisy