css - 6 images per row no matter the screen size with image size adjusting - html css3 -

im trying achieve 2 rows of images (ie. 6 images in first row , 6 images in second row). when screen size between 320px , 480px gives requirement. however, i'm not able adjust other screens.

please take @ link here: sample html page

i have found similar question here --> stackoverflow qs

however, different implementation. ideally, 2 rows of images stay size of image should become larger when screen size increases.

any tips/ideas or resources implement kind of solution appreciated.

thanks!

i not sure of question, , if code provide little code help. anyhow go doing this:

css

#image {     min-width: 320px; /*sets width of 320px*/     width: 16.66%; /*if page gets bigger image become 1/6 of page's width*/ } 

so basically, set min-width, , after set percentage of page be. width only used when min-width true.

edit

i realized how answer kind of wrong (tiredness factor). take in account following example:

html

<div id="holder">     <image class="image" src="">     <image class="image" src="">     <image class="image" src="">     <image class="image" src="">     <image class="image" src="">     <image class="image" src=""> </div> 

css

#holder {     min-width: 320px;     width: 100%; }  .image {     width: 16.66%;     position: relative; } 

simply, make 6 images have minimum width of 320px. if screen size gets smaller 320px, #holder, item holding images, go off page. yet, if page gets bigger 320px images each take 16.66% (1/6) of #holder's width, 1/6 of page width. 2 combined values can make images expand, never smaller than.