How to hide a part of text of the product grids on mobile

  • Resolved galabina

    (@galabina)


    1 year, 8 months ago

    Hi,

    I have the following issue….

    I made an online store with Woocommerce and Elementor Builder. Everything looks perfect, but the problem is that some of the headers of the products are longer than others and when you switch to mobile view it does not look good.

    The question is:

    Is there an option, part of the text to be hiden only for mobile. For example if there are product with 5 lines of text, to hide the last two and make it a maximum of 3 lines. I tried different combination of CSS, but unfortunately nothing happened.

    Please see the links bellow:
    https://ibb.co/dj5mWYN
    https://ibb.co/QF7D8pr

    I would be very grateful if you could help me solve this case! : )

    Thank you in advance for your prompt reply.

    Have a great day! : )

    Galabina

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @galabina

    This can be fixed with some custom CSS. Under Customize > Additional CSS, you can add the following code:

    /* reduce the product title text after three line*/
@media screen and (max-width:480px){
.archive li.product h2.woocommerce-loop-product__title {
    max-height: 70px;
    text-overflow: ellipsis;
    overflow: hidden;
}
}

    If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

    Thread Starter galabina

    (@galabina)

    Hi Amir,

    Thank you very much for your kind support. <3

    BR,

    Galabina

    Hi @galabina

    You are most welcome and we’re glad that worked! ??

    I will be marking this thread as resolved. Should you have further inquiries, kindly create a new topic here.

    Meanwhile, if you have a moment to spare, we would love it if you could share your thoughts with us by leaving a review or feedback. Your experience and feedback are important to help us improve and ensure we’re always providing the best possible support.

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to hide a part of text of the product grids on mobile’ is closed to new replies.

Tags