Product thumbnail padding problem

Hi guys,

So I’m trying to customize the size of my product thumbnails relative their column containers (have more padding or width around the pics) and as per this thread:

https://kriesi.at/support/topic/resize-image-containers-for-product-grid-using-woocommerce/

I’m using this CSS:

#top .thumbnail_container img {
margin: 0 auto;
width: 240px;
position: relative;
}

It does work, but the problem is when the “hover effect” for the product thumbnail is enabled, the product page display is messed up- basically there is a blank space showing above the main product thumbnail. When this blank space is moused over, what would be the next pic to be displayed upon hover shows up.

When the hover effect is turned off, the page displays normally, with the desired padding.

The question then is: is there a way to have the custom padding AND the hover effect enabled in a way that displays normally (i.e. not having the blank space above the main product photo)?

Hope this makes sense- I’ll leave the product hover enabled on the link I’m attaching so you can see what I mean. You’ll notice the top part of the page is blank, but when moused over, the pics appear.

Thanks, you coding rockstars! Best theme ever.