the url to my site is http://www.designstyleshome.com/products.php
I am trying to set each image as width:100% so that I can make my design responsive.
Each image is in a div called .product, which has a width of 100%. So why wont the image take up the entire width of div.product?
Thanks...
Heres my code:
HTML:
<div id="columns">
<div class="product"><img src="images/products/floral_basket1.jpg" width="400" height="394" border="0" alt="Floral Basket 1" /></div>
</div>
CSS:
#pages.products #columns{
-webkit-column-count: 2;
-webkit-column-gap: 20px;
-moz-column-count: 2;
-moz-column-gap: 20px;
}
#pages.products .product{
margin:0 0 30px 0;
width:100%;
display:inline-block;
-webkit-column-break-inside: avoid;
}