Reply To: Woo's Response to issues in Epik with WooCommerce

Hi,

Looking at the sites again I can see that on this site

http://newlilypad.wpengine.com/product-category/accessory/

there are two bits of CSS affecting the image sizes. Firstly in

href=’//newlilypad.wpengine.com/wp-content/plugins/woocommerce/assets/css/woocommerce.css

there’s this

ul.products li.product a img {
width: 100%;
height: auto;
display: block;
margin: 0px 0px 8px;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
transition: all 0.2s ease-in-out 0s;
}

which is setting the image width to 100%. Setting things to % sizes is setting them relative to their containing block so an image that has 100% width isn’t necessarily its actual size, see here http://www.impressivewebs.com/width-100-percent-css/

Once you remove this the next problem is in the Epik style.css :

ul.products img {
background: none repeat scroll 0px 0px transparent;
border: 0px none;
float: left !important;
height: auto;
margin: 0px 12px 0px 0px;
padding: 0px;
width: 90px;
}

which is setting the img width to 90px. Remove this and the image displays at its correct size.

On the site http://www.lilypadev.com/product-category/accessory/ images are correct size because its not using the WooCommerce CSS and there’s a rule in the custom.css file

ul.products img {
width: auto;
height: auto;
}

If you change the rules in the Woo Commerce and Epik CSS style files, then you could affect something else. What I would do is create a new rule that is specific enough overrides these two rules. Something like the custom.css rule above with !important after it.

On this page the problem is similar http://newlilypad.wpengine.com/shop/electric-vehicle-charging-station-signs-two/

the woocommerce.css is sizing the images to 100%, which is why they are too big.

div.product div.images img, #content div.product div.images img {
display: block;
width: 100%;
height: auto;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
transition: all 0.2s ease-in-out 0s;
}

Really Woo should be fixing that as they shouldn’t be sizing stuff to 100%

The rule #main { width: 600px; } is looking for the ID main in your HTML but I don’t see one so that is why this is having no effect. The <main> container doesn’t have an ID by which you can select it. The Epik style.css is setting the <main> container to 740px so change that

.content {
float: right;
width: 740px;
}

I don’t see anything in the HTML with a class of col-left so this line isn’t affecting anything

.col-left { float: left; }

I’m just using the Inspector in Firefox to see the code ( Right-click, Inspect Element (Q) ). I have then opened the CSS file which is why I can see/copy the comments.

Phil