woocommerce thumbnails have different image widths in chrome and mozilla

Question

Hello I recently run into a weird issue. I am running a Woocommerce theme built on bootstrap 3. I did some custom CSS modification and Image thumbnails appear REALLY narrow on Chrome and fine on Thunderbird. Could someone help me? I might be missing something fundamental here... Before you ask, no I am not running any extensions Here are the images:

CHROME: http://i60.tinypic.com/37l3b.jpg

MOZILLA: http://i57.tinypic.com/dmpjbn.jpg

CSS

.thumbcustom{
float:left;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
max-width:24% !important;
margin-left:7px;
}

And the HTML file:

                    <?php
            /**
             * Single Product Thumbnails
             *
             * @author      WooThemes
             * @package     WooCommerce/Templates
             * @version     2.3.0
             */

            if ( ! defined( 'ABSPATH' ) ) {
                exit; // Exit if accessed directly
            }

            global $post, $product, $woocommerce;

            $attachment_ids = $product->get_gallery_attachment_ids();

            if ( $attachment_ids ) {
                $loop       = 0;
                $columns    = apply_filters(  'woocommerce_product_thumbnails_columns', 3 );
                ?>
                <div class="thumbnails thumbcustom"><?php

                    foreach ( $attachment_ids as $attachment_id ) {

                        $classes = array( 'zoom' );

                        if ( $loop == 0 || $loop % $columns == 0 )
                            $classes[] = 'first';

                        if ( ( $loop + 1 ) % $columns == 0 )
                            $classes[] = 'last';

                        $image_link = wp_get_attachment_url( $attachment_id );

                        if ( ! $image_link )
                            continue;

                        $image       = wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_small_thumbnail_size', 'shop_thumbnail' ) );
                        $image_class = esc_attr( implode( ' ', $classes ) );
                        $image_title = esc_attr( get_the_title( $attachment_id ) );

                        echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '<a href="%s" class="%s" title="%s" data-rel="prettyPhoto[product-gallery]">%s</a>', $image_link, $image_class, $image_title, $image ), $attachment_id, $post->ID, $image_class );

                        $loop++;
                    } ?>
                </div>
                <?php
            }

Answer 1

Having to override default styles is one of the reasons I hate Bootstrap...

image HTML has a width/height 180px180px... but there is a conflict between parent container for image

woocommerce-layout.css

#single-product div.thumbnails a {
    width: 100%;
}

.woocommerce #content div.product div.thumbnails a, .woocommerce div.product div.thumbnails a, .woocommerce-page #content div.product div.thumbnails a, .woocommerce-page div.product div.thumbnails a {
   width: 30.75%; 
}

set this to be this will fix issue you have in FF as well...

#single-product div.thumbnails a {
    width: calc(25% - 2px); //2px compensate for border Doesn't support IE8
}

then image has a max-width 100% but this is 100% of the container in chrome this translates to about 87px for the image.

Then you have a fixed height set at 112px which makes it out of proportion template.css

#single-product div.thumbnails a .attachment-shop_thumbnail {
    height: 112px;
}

set it to height:auto