How can I display the full product title on my page?

[Petpower]

Hey everyone,

I'm trying to make it so it shows the full product title on my page.

Url Petpower.dk

 

Thank you so much in advance for your help! 

[webwondersco · Accepted solution]

@Petpower hope you are doing well.

Please add the below line of CSS code at the end of your t4s-base.css file.

.t4s-pr-ellipsis-true .t4s-product .t4s-product-info .t4s-product-title{
    white-space: normal;
}

[ThePrimeWeb]

Hey @Petpower,

Can you share the link to your store and maybe a screenshot of what you want to change?

[Petpower]

Hey, yeah I just updated the post because it was to little info.

Petpower.dk

I want it to show the full title on the product because many of our costumer's would find it easier 

[ThePrimeWeb]

Hey @Petpower,

I see you are using a custom theme. I wouldn't know the code in it. Generally a theme from the Shopify Store, I would install myself and find the code to change and send you some screenshots for instructions. Would you mind if I use your websites contact form to talk to you?

[Zeel-prajapatii]

Hey @Petpower 

 Please add the below css to your code file "t4s-collection-products.css"

.t4s-product-title a{

    overflow: visible;

    text-overflow: inherit;

    white-space: normal;

}

Thanks.

[Petpower]

Thank you very much. That did exactly what i wanted.

You were a big help

[Petpower]

Is there a way so it does the same, when people use their mobil?

[webwondersco · Accepted solution]

@Petpower hope you are doing well.

Please add the below line of CSS code at the end of your t4s-base.css file.

.t4s-pr-ellipsis-true .t4s-product .t4s-product-info .t4s-product-title{
    white-space: normal;
}

[Petpower]

Thank you, that helped.

Now even my mobil version shows full text. Thank you very much

[Zeel-prajapatii · Accepted solution]

Hey @Petpower  

 Please add the below css to your code file "t4s-collection-products.css"

.t4s-product-title a{

    overflow: visible;

    text-overflow: inherit;

    white-space: normal;

}

Thanks.