Products (Grid or Carousel) Equal Size Tiles

Hi, when using the Products (Grid or Carousel) and then selecting “Tiled” for the design, if a title of one product is too long the box or tile becomes larger than the next product because the title is two lines instead of one *Screenshot Attached*.

Is there any way to make all of the boxes equal size so that it looks nice? Like how Amazon has theirs. What they’ve done is if a title is too long it cuts off the title and inserts “…” at the end to suggest the title is longer. *Screenshot also attached* (See red arrow for the “…” example.)

I’d really appreciate any help on this. The Products (Grid or Carousel) is a great element for showcasing products but it would be nice to get a clean look on the tile design. Thank you for your time and i’m still loving the theme and the updates and work you’re putting into it.

Attachments:

You must be logged in to view attached files.

Hello,

This can be changed with custom CSS, setting min-height for the title:

.product-grid-item .product-title,{
   min-height:40px;
}

Please add this code to Theme Settings > Custom CSS. You can increase or decrease the value 40px

Best Regards

Hi, thank you for the reply. I’ve added this into my Global Custom CSS in Theme Settings > Custom CSS. Unfortunately is has made no difference though. I tried 40px, also tried 400, and 1 px and none of them make a change.

EDIT:

Nevermind it’s working now. All I did was remove the , from the CSS.

Thanks a bunch for the help it looks a lot better now.

Attachments:

You must be logged in to view attached files.

Hello,

Sorry for the misprint. Now, I see the titles are of the same height. If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts