Product grid won’t align properly Woocommerce, Wootique theme

2 Views

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:

Read More
.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…

Post Views: 2

Related posts

Leave a Reply

1 comment

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