Venture Theme Titles Cover Pictures - How to change this?

lionsdenoffroad
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
Vadzim
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
lionsdenoffroad
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
eon
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
BerrysBuys
New Member
1 0 0

Hi, Thank you it worked and now i can see more of the picture but still some of the bottom of the picture is covered. Is there a way to completely lower the text so you can see the whole image?

0 Likes
evanc1223
New Member
1 0 0

I'm having the same issue. Anyone figure out how to fix this? This recommendation does not work for me?

0 Likes