Jump to content



Photo

Responsive Grid Ideas

responsive grid ideas wall

  • Please log in to reply
1 reply to this topic

#1 Tjcrazy

Tjcrazy

    Your Average Neowin Guy.

  • Joined: 02-May 09
  • Location: The Cotswolds, United Kingdom

Posted 06 November 2012 - 17:52

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>


CSS:
    /*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;
}

Tim

Attached Images

  • wall.png



#2 timons106

timons106

    Neowinian

  • Joined: 15-November 12

Posted 16 November 2012 - 09:53

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/