CODEWITHSUNDEEP
cssresponsive-design
ngplayground
ngplayground

Reputation: 21617

Responsive images and lists

Tryign to get it so that I have a max width for an image to be 308px and when the browser is scaled larger then the list will have more items per row. Just now it seems stuck at 3 list items per row but if I would like it to be fully reponsive and if the browser is scaled to minum it can be then it will be one image per row.

html

<ul>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
</ul>

css

ul{
    position:relative;
    float:left;
    width:100%;
    height:100%;
    margin:45px 0 0;
}
ul li{
    width: 33.3333%;
    float:left;
}
ul li img{
    display: block;
    height: auto;
    width: 100%;
}

JSFIDDLE

Upvotes: 1

Views: 10979

Answers (3)

Ana
Ana

Reputation: 37169

Another idea would be to use display: inline-block; instead of float: left and set max-width: 308px; and min-width: 100px; for the list items.

demo

HTML:

<ul>
    <li><img src="image.jpg"></li><!--
    --><li><img src="image.jpg"></li><!-- as many more list items as you need
    -->
</ul>

The way I've written it (with comments between list items) does serve a purpose - any kind of whitespace matters when using inline-block.

CSS:

ul {
    padding: 0;
    margin: 45px 0 0;
}
ul li{
    min-width: 100px;
    width: 33.3333%;
    max-width: 308px; 
    display: inline-block;
}
ul li img{
    display: block;
    height: auto;
    width: 100%;
}

Upvotes: 0

SpaceBeers
SpaceBeers

Reputation: 13947

You need to use media queries.

Just set up media queries for each "breakpoint" and change the li width.

For example:

    /* Show one image on devices under 540px */
    @media screen and (max-width: 540px) { 
       ul li{
        width: 100%;
        float:left;
       }
    }

    /* Show three images on devices between 550 and 800px wide */  
    @media screen and (min-width: 540px) and (max-width: 800px) {
       ul li{
        width: 33.333%;
        float:left;
       }
    }

    /* Show five images on devices between 800px and 1180pxwide */  
    @media screen and (min-width: 800px) and (max-width: 1180px) {
       ul li{
        width: 20%;
        float:left;
       }
    }

http://jsfiddle.net/spacebeers/gfjDk/3/

Upvotes: 7

MassivePenguin
MassivePenguin

Reputation: 3711

Use media queries (as per SpaceBeers' suggestion) coupled with a min-width property on the list items... JsFiddle

Upvotes: 0

Related Questions