My products won't align properly!

[casperibz]

Hi there I’m using WordPress, Woocommerce and the Wootique theme.

I have a problem with the Woocommerce Product Display the grid keeps un-aligning so that there is one product on one row and others products in different row are right next to each other I have tried adding this bit of custom css to adjust the minimum height of the products as I read somewhere this is the problem:

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  min-height: 293px !important;
}

It solved the problem temporarily until I install the plugin YITH AJAX Product Finder and it seems to have changed back to how it was but i’m not sure if that’s related…I have tried increasing the height to see if that helped but it hasn’t. Any idea’s anyone? Here’s a link to the product page…

http://casper-creations.com/product-category/caketoppers/

[casperibz]

style.css – Line 247

ul.products {
   margin-left: 0;
   padding-left: 2px;
   padding-right: 2px;
   padding-top: 2px;
   zoom: 1;
   display: initial; /* Added */
}

style.css – Line 251

Delete

float: leftand width: 30.75%

custom.css

.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product {
    display: inline-block; /* Added */
    vertical-align: top; /* Added */
    width: 30%; /* Added */
}

EDIT – please try to add this at the end of your custom.css, so we can be sure that those rules are not being overwritten by other CSS..

.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product {
   min-height: 293px !important;
   display: inline-block;
   vertical-align: top;
   width: 30%;
}

[Author]

Posts