Product thumbnails won't align

[MHC]

I tried to delete all css and cleared cache, but it’s the same.
The css you gave me does work, but one thumbnail size still weird.
Here are the css I am currently using, just FYI.
Thanks again!!

@media only screen and (min-width: 1200px) {
body.woocommerce .has-no-sidebar ul.products li.product {
width: 212px;
}
}
#logo a.mobile-menu-show i:after {
content: "MENU";
float: left;
margin-right: 12px;
font-size: 14px;
line-height: 20px;
font-style: normal;
}
nav .menu li {
text-transform: uppercase;
}
#header-section #header {
padding: 10px 0!important;
}
.bag-product figure, .woocommerce ul.products li.product figure, #product-img-slider, #product-img-nav li, .woocommerce table.shop_table img, .woocommerce-page table.shop_table img, .mini-list li figure {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.shop-actions {
  display: none;
}
.wc-new-badge{
    display: none;
}
.free-badge {
  display: none;
}
.products .posted_in{
    display:none;
}
/* IMAGE AREA */
.woocommerce div.product div.images {
width: 50%;
}
/* DETAILS AREA */
.woocommerce div.product div.summary {
width: 47%;
}
p.pp_description{
display:none !important
}
a.accordion-toggle[href="#product-desc"]{
display:none
}
#product-accordion .accordion-group:nth-child(2) {
display: none;
}
.product_meta p .leave-feedback {
display: none;
}
.blog-item-details {
display: none !important;
}
.standard-post-author {
  display: none;
}
.post-date, .author-info-wrap.clearfix {
display: none;
}
.woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price {
clear:both;float:left;color:#2d2f36;font-size:14px;font-weight:400;
}
.woocommerce div.product .entry-title {
display: block;
float: right;
width: 47%;
text-align: left;
font-size: 18px;
margin-bottom: 8px;
}
.woocommerce div.product .summary p.price, .woocommerce-page div.product .summary p.price {
font-size: 18px;
}
.related.products h4.lined-heading {
display: none;
}
.widget_categories ul > li a:before, .widget_archive ul > li a:before, .widget_nav_menu ul > li a:before, .widget_meta ul > li a:before, .widget_recent_entries ul > li a:before, .widget_product_categories ul > li a:before { display: none; }
.inner-page-wrap.woocommerce-shop-page {
  margin-top: 10px;
}
.woocommerce form.cart button.single_add_to_cart_button {
background: #ffffff
}
.sidebar .widget-heading h4:before {
border: none!important;
}
.sidebar .widget-heading h4 span, .sidebar .widget-heading h4 {
text-align: left;
padding-left: 0px;
margin-left: 0px;
}
nav .menu ul.sub-menu li:first-child:before{border:0;margin-top: 0px;}
.widget ul li > a{text-align:center}

[Swift Ideas – Ed]

Can you explain what you mean by “but one thumbnail size still weird”?

– Ed

[MHC]

Please see attached screenshot. If you look at the lower left thumbnail it’s slightly bigger than others. It’s the same situation when viewing from other browsers.

[MHC]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please try to use this custom css code :
.woocommerce ul.products li.product a img{max-height:212px}
Hopefully that should work 100% and let me know your feedback.

Thanks 🙂
With Best Regards
Swift Ideas

[Swift Ideas – Ed]

@meihsun – please use this css instead of the code above:

@media only screen and (max-width: 767px) {
.woocommerce ul.products li.product figure {
padding-bottom: 208px!important;
}
}
@media only screen and (max-width: 479px) {
.woocommerce ul.products li.product figure {
padding-bottom: 128px!important;
}
}

– Ed

[MHC]

I just added WooCommerce sidebar to the shop page and the thumbnails won’t align again. Could you please kindly take a look? Thanks so much!

[Swift Ideas – Ed]

Here you go:

@media only screen and (min-width: 1200px) {
body.woocommerce .has-one-sidebar ul.products li.product {
width: 212px;
}
}

– Ed

[MHC]

The code works perfectly. Thank you very much.

[Swift Ideas – Ed]

Glad I could help 🙂

– Ed