Change product card size and make responsive

  • Resolved edgarkaplan

    (@edgarkaplan)


    6 years, 3 months ago

    Hi,

    I have been trying to make all product-cards the same height as well as wrap text in the card, however I have not been able to achieve it. Could you help me please?

    The link can be seen here: https://bit.ly/2PJuRn3

    I would like to make them all a fixed size, so that the rest of the text just wraps as ellipsis, and that they are also responsive on mobile because currently it is not.

    Could you please help me with this?

    Thank you.

Viewing 5 replies - 1 through 5 (of 5 total)
  • AddWeb Solution

    (@addweb-solution-pvt-ltd)

    Hello edgarkaplan ,

    Add below css code into your current active child theme’s style.css file or you can add additional css option in theme customizer

    ul.products li {
    display: flex;
}

.card .card-image, .card-no-width .card-image {
  max-height: 230px;
}
@media only screen and (max-width: 768px) {
    .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
       width: 79%;
   }
}

    Hope this will helps you.

    Thanks.

    Thread Starter edgarkaplan

    (@edgarkaplan)

    Hi AddWeb,

    Thanks for your help!

    It made everything equal… however I was wondering if there is a way to trim it and wrap the descriptions? At the moment it simply takes the largest product card and makes the rest the same height, but I would like it so that all cards were not larger than 500px with the extra description text being wrapped in an ellipsis style.

    Could you please help me achieve this?

    Thanks again for the help!

    AddWeb Solution

    (@addweb-solution-pvt-ltd)

    Hello edgarkaplan,

    Add below css code into your current active child theme’s style.css file or you can add additional css option in theme customizer

    .woocommerce .product .card {
    max-height: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-description p{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
   
}
.card-description{
   display: block;

}

    Hope this will helps you.

    Thanks.

    Thread Starter edgarkaplan

    (@edgarkaplan)

    Hi AddWeb,

    Thanks for your help!

    Unfortunately it didn’t quite create the effect I was looking for. It ends up making every new lines of text wrap using ellipsis style, and because I have so many variations of rows of text the cards look out of place (some have 1 line some have 6 lines)

    I was looking for a solution that keeps the description at a fixed amount of lines, for example 4 or 5 lines, and all the text gets wrapped in those lines. Anything that does not fit is then to cut of using ellipsis.

    Here is an example of what I am trying to do: https://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/

    Could you please help me tweak it to create this effect?

    Thanks for all your help!

    Hey guys i have a similar issue and none of the solutions above seemed to resolve it. Everything works fine on my Hestia based site except the product card resizing on a cellphone(mobile device) it is not responsive at all. It looks as though there may be too much padding or the width is incorrect for the product cards.

    Please help!!!!

    see link below on a mobile device:
    https://www.fbflifestyle.co.za/product-category/beaachwear/beachwear-accessories/

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change product card size and make responsive’ is closed to new replies.