Lucy 'Casper' Smith Lucy 'Casper' Smith - 4 months ago 22
CSS Question

Product grid won't align properly Woocommerce, Wootique theme

Hi there I have a problem with the woocommerce product display the grid keeps un-aligning so that there is one on a line and others are right next to each other I have tried adding this bit of custom css:



.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 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/

I'm using the wootique theme...

Answer

Ok, I've changed some CSS, to align your product boxes properly. Apply following changes to your CSS -

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%;
}