Sign in to follow this  
Followers 0
Tjcrazy

Responsive Grid Ideas

2 posts in this topic

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

post-291040-0-27646300-1352224195.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.