For anyone that has experienced the problem where the grid alignment of store items fails on small screens (<767 px), in my case due to products with long names that wrap several lines, there is a pretty simple fix that worked for me.
@media only screen and (max-width: 767px) {
.woocommerce ul.products li.product:nth-child(2n),
.woocommerce-page ul.products li.product:nth-child(2n) {
float: left;
}
}
For whatever reason, a WooCommerce stylesheet was forcing these items to float right, which caused some funky alignment issues; things ended up looking like a two column masonry grid. This propagates down the page, so if you have more than a few items with larger heights, it turns into a mess and looks pretty bad. This problem is not apparent if your products have short, or equally long names. In any event, I am relatively certain that this is a general case and not particular to me, but I can’t be one hundred percent certain, so your mileage may vary.
.