Responsive Grid Ideas

[Tjcrazy]

Hey Guys

I'm currently producing a website, and I've got an interesting predicament.

I've got a wall, with many thumbnails on it. As you can see in the attached picture.

Basically, I want to somehow make it responsive, so it still looks good for every screen size.

I'm using HTML5Boilerplate, and was wondering how I could make it responsive.

If you look at the attached image, its what I've got at the moment.

Any suggestions, that would be great.

This is the code i've got:

  <div id="wall">
   <div id="innerwall">
    <div class="face"><img src="images/noface.png" /></div>
    <div class="face"><img src="images/noface.png" /></div>
    <div class="face"><img src="images/noface.png" /></div>
    <div class="face"><img src="images/noface.png" /></div>
    <div class="face"><img src="images/noface.png" /></div>

    <div class="face"><img src="images/noface.png" /></div>
    <div class="face"><img src="images/noface.png" /></div>
    <div class="face"><img src="images/noface.png" /></div>
    <div class="face"><img src="images/noface.png" /></div>
    <div class="face"><img src="images/noface.png" /></div>
    <div class="face"><img src="images/noface.png" /></div>
    <div class="face"><img src="images/noface.png" /></div>
    <div class="face"><img src="images/noface.png" /></div>
    <div class="face"><img src="images/noface.png" /></div>
    <div class="face"><img src="images/noface.png" /></div>
    <div class="face"><img src="images/noface.png" /></div>

   </div>
  </div>
[/CODE]

CSS:

[CODE]
/*WALL*/
#wall {
background-image: url(../images/bg.jpg);
background-repeat: repeat;
width: 100%;
height: 100%;
min-height: 400px;
overflow: auto;
text-align: center;
}
#innerwall {
margin-left: auto;
margin-right: auto;
width: 90%;
}
.face {
margin: 25px;
float: left;
}
[/CODE]

Tim

[timons106]

Here you go: http://verekia.com/i...nsive-template.

Just be sure you chose the responsive HTML5 Boilerplate.

If you really want to make it easy for yourself you should take a look at Twitter Bootstrap, it's awesome :).

Edit:

For the first example you need Initializr, it exists of HTML5 Boilerplate + Modernizr + jQuery: http://www.initializr.com/