Venture Theme Titles Cover Pictures - How to change this?

Highlighted
New Member
2 0 0

I'm lookin to change how my product pictures look when browsing. Currently some of my product titles are longer than others, which makes them almost fully cover the product image (almost completely on mobile, less so on desktop). I'm hoping someone can point me in the right direction as to how to make these product titles show preview of title, and when hovering on image pop up with full title? Or even just less text with a ...

 

Here is an example, it is much bigger issue on mobile. https://www.lionsdenoffroad.com/collections/jeep-front-bumpers/aries

0 Likes
Highlighted
Shopify Partner
66 2 9

Hello!

 

If you are familiar with CSS,

the easiest solution will be to trim extra lines of text.

 

To do so you need to add following code to the end of theme.scss.liquid file of your published theme:

 

 

.product-card__name {
    display: -webkit-box;
    max-height: 120px;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

 

Result:

iLRYkZxojn0FA9i0PQVhNNQGrzvlCx

Hope it helps!

 

Developer @ MageWorx | Explore our Shopify apps | Need theme customization or migration? Reach us at apps@mageworx.com
0 Likes
Highlighted
New Member
2 0 0

Awesome!! Much appreciated!!


@Vadzim wrote:

Hello!

 

If you are familiar with CSS,

the easiest solution will be to trim extra lines of text.

 

To do so you need to add following code to the end of theme.scss.liquid file of your published theme:

 

 

.product-card__name {
    display: -webkit-box;
    max-height: 120px;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

 

Result:

iLRYkZxojn0FA9i0PQVhNNQGrzvlCx

Hope it helps!

 


 

0 Likes
Highlighted
New Member
3 0 0

I have been trying to do the same for our website but somehow its not working out. Our website address is - eonshoppee.com

I am fine either by trimming the title or by making sure the image shows full and then the text appears. In the current state on mobile the image is getting over laid by text almost fully. Need some help urgently.

0 Likes