css code to show full product title on thumbs

Hi! Would anyone be able to assist me with correct css code to show the full product title of product thumbnails?

Example of product page where titles are being cut off in most browsers/mobile:

Thank you!


  • alinajenonalinajenon Member Posts: 2

    I have access to Theme Editor, here are screenshots of the files.

  • Pit_La_QuillePit_La_Quille Member Posts: 22

    Hello there !

    I think you will need to work with the 'product.rain' snippets and the 'style-min.css' assets !

    Do you want it to be displayed when the mouse is over like your exemple ? if so, you'll need to work with the 'hover' selector. This could help you : https://www.w3schools.com/csSref/sel_hover.asp

    you can also check the others selectors, you may need them to.

    Have a nice day !

  • JoeyJoey Administrator, Moderator, Lightspeed Staff Posts: 277 moderator

    Hi @alinajenon

    The text is hidden by the CSS class .products .product .info .title

    The overflow is set to hidden: overflow: hidden;

    But by changing it and showing the hidden text it will be flowing over the price text. You will need to modify the CSS of the height as well to make it all work properly.

    The issue:

    By tinkering with the CSS you can make it work tho! Or adjust the product titles.

    eCom Support Team
    Lightspeed HQ
Sign In or Register to comment.