0

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;
}
2
Contributors
1
Reply
11
Views
3 Years
Discussion Span
Last Post by nauticalmac
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.