Product Box Height on Shop Page/Category page

Try adding this CSS rule somewhere:
.col-inner { height: 100%; }

It appears the outer container (which is not visible, it establishes the spacing between elements) is always the correct size, this rule ensures the inner container (which is the visible one) is always the same height as the outer.

You could add the style to your theme’s /assets/css/flatsome.css, there’s already a .col-inner selector right at the top. You would lose this edit when the theme is updated though. A way around this is create a child theme. Any other customizations will be safe here as well. Many commercial themes are installed as children of a common framework theme. If so, child themes are not an option for you.

Some themes have a particular setting field where you can add custom CSS. There are plugins that let you add custom CSS. You can create your own plugin that enqueues a CSS file.

Hello,

Thank you, that worked great for the box size! They are all the same size now.

Do you know how to get the first line of short descriptions and the add to cart buttons to align with the descriptions and buttons on the adjacent products?

Thanks!

There is a discrepancy in the font sizing of various boxes. It may have to do with the original source rather than the page grid. Some content is in a <p> element with the classes “box-excerpt is-small” and in other cases this element is empty and the text is in another <p> element below. If all text is in the proper “box-excerpt is-small” element, then the text sizes will be uniform and the lines should then align properly.

This CSS should get the buttons aligned:

.box {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.box-image, .box-text {
  height: 100% !important;
}
.add-to-cart-button {
  bottom: 20px;
  position: absolute;
  width: 94%;
}

Using “!important” is a poor practice, but needed to override another rule that is height: auto; for the .box-image class. If you can locate and remove this rule, then the !important in my CSS is not required. It should be at the top of /assets/css/flatsome.css

Hello! I’ve tried all possible suggestions, but just nothing happened ?? The product boxes are all different height, and no way to make them equal. I have Sabino theme. If someone can help, would be awesome!