Home Forums WoodMart support forum Fix product-grid-item to equal height when title is more than 1 line

Fix product-grid-item to equal height when title is more than 1 line

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #150782

    James
    Participant

    In the product grid, when the product title is more than 1 line, the grid height of the product changes.

    How can we set the product item to have equal height, no matter the title length? (usually titles are 1-2 lines max).

    Here’s how the issue looks like when I want to add a border-bottom.

    Attachments:
    You must be logged in to view attached files.
    #150791

    Hello,

    There is the option to limit the product title, you can make one or two lines, in result, it makes all the items height equal and aligns on the same level. You can find this option in the Theme Settings > Shop > Product styles > Product title lines limit https://prnt.sc/pks5oo

    Best Regards

    #150870

    James
    Participant

    Yea, that doesn’t actually solve the issue it just covers it by truncating the title which isn’t the correct outcome and I don’t want that. Product titles are very important 🙂

    Plus, since the theme is based on Bootstrap 4, the equal grid height should be integrated by default.

    So, do you have some fix for this, except Theme Settings > Shop > Product styles > Product title lines limit ?

    #150916

    Hello,

    I can provide custom CSS which fixes the height of the element. The disadvantage of this way is that there will be a gaps in the grid in the products with a short title.

    Best Regards

    #151190

    James
    Participant

    Hi Elise, thanks for the suggestion, I will take you up on the offer of the custom CSS.
    Will be waiting for it.
    Have a nice weekend.

    #151227

    Hello,

    Please provide the page URL. You provided site access earlier, however, it seems that it is another site. If your site is under maintenance, please provide your site admin access to the private area as well.

    Best Regards

    #151577

    James
    Participant

    Hi, please try again with the same details and URL provided above.

    Thanks

    #151591

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    body .product-title, .product-grid-item .product-title{
    min-height:36px;
    max-height:36px;
    }

    You can change 36px as per your needs.

    Best Regards

    #151626

    James
    Participant

    Hi Elise, I’m afraid that it doesn’t fix the issue.

    The issue is that the .product-grid-item does not have equal height in the same row, look at the attached screenshot.

    So your fix, it affects the title height but not the whole col in the grid.

    https://gyazo.com/45c56933845f5f24c14ba04f1add6c67

    #151638

    Hello,

    Please replace the code with this one:

    body .product-title, 
    body .product-grid-item .product-title{
    min-height:36px;
    max-height:36px;
    }

    This code fixed the product title to be one and the same height regardless of the length of the title.

    Another problem is the images of different sizes. Please read and follow the instructions from this manual: https://xtemos.com/docs/woodmart/faq-guides/image-size-content-alignment-product-grid/

    Best Regards

Viewing 10 posts - 1 through 10 (of 10 total)