Css for responsive thumbnail?

HTML & CSS
1

I’m wondering how best to change my css for thumbnail images so they’re suitable for a responsive site.

On full-width images I’m using box-sizing, which will work for the thumbs if I add a containing div but I wanted to avoid the extra div.

2

You could give them a % width. Or you could perhaps float them so the drop on narrow screens. If you want specific sode, we need a specific example, though.

3

Thanks. You helped me earlier in thread 1075440.

The non-responsive code is:


img.tl-1 /* left thumbnail */
{
clear: both;
float: left;
padding: 4px;
border: 1px solid #aaa;
margin: 0 15px 2px 0;
}

and I’m trying this:


img.tl-1
{
clear: both;
float: left;
display: block;
width: 30%;
min-width; 80px;
height: auto;
padding: 4px;
border: 1px solid #aaa;
box-sizing: border-box;
-webkit-box-sizing: border-box; /* Safari */
-moz-box-sizing: border-box; /* Firefox */ 
margin: 0 15px 2px 0;
}

The images were either 100 or 150px square on desktops.