Member Avatar for suavedesign

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
  • 172 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by nauticalmac
Member Avatar for nauticalmac

Your product div may take up 100% but the image size inside it is set to 400x394 by your code. If you don't set width and height then it will default to the image size. You will have better luck putting the image in the background and using css 'cover' or 'contain'.
See the following
http://www.w3schools.com/cssref/css3_pr_background-size.asp

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.