Subcategory Product Grid Spacing Issues

The space on the page is for 3 products put the code is producing 4 products per row, so there is a line break after each 4th product.

If you want 3 products per row, some themes have a setting for this. Look through your theme options.

If not, there is a code snippet you can try to set 3:
https://docs.woocommerce.com/document/change-number-of-products-per-row/
This snippet goes in functions.php for your child theme or you can use this plugin for the code:
https://www.ads-software.com/plugins/my-custom-functions/

Thanks for the info. I was able to fix it with the following css.

.row-count-4 .product-category {
width: 290px !important;
}

Another Grid issue we seems to be having is cropping. For some reasons the product pictures are not uniformly cropped and display at various sizes.
(example: https://gelatofino.com/product-category/3layercake/)

Is there a way to force all product pics to have the same crop dimensions and fill accordingly?

.products-grid .product img {
  height:320px
}

The 320 value is a compromise between stretching some and squashing others.

works great for the product grids and slider!
Unfortunately it stretches out the products pics here (below slide): https://gelatofino.com/
here: https://gelatofino.com/product-category/sorbet/
and here: https://gelatofino.com/product-category/gelato/

You’ll need to add another selector to restrict the effect to that category. You can get the category selector class from the body tag. For the three layer cake its term-77, so

.term-77 .products-grid .product img {
  height:320px
}

You can have different styles for different categories if you need to.

I defined the terms for all the pages. worked great. Thanks!
the only thing I can’t seem to restrict is the Featured Products Slider on the bottom of the home page. https://www.gelatofino.com/

.home .vc_general img {
  height:320px
}