Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Posted by Phillip Gibson
Phillip Gibson
1,731 Points

Some of my images will not line up

Okay so now I've started working on making this project my own. I have a few more images then the instructor uses, (12 to be exact) but I didn't think that would be an issue...boy was I wrong. The first 7 images line up just fine but the last 5 are all over the place and I'm not sure why, please can someone help me?

Sam Baines
Sam Baines
4,315 Points
Sam Baines
Sam Baines
4,315 Points

Hi Phillip - if you post your code (css & html) then maybe someone can have a look and see if they can help.

3 Answers

Jeremy Castanza
Jeremy Castanza
12,081 Points
Jeremy Castanza
Jeremy Castanza
12,081 Points

Philip, the video had an error in the code that was detailed in the footnotes.

nth-child should be 3n+1 rather than 4n.

Thinking about it, it makes sense... 4n selects every fourth image regardless of it's position. 3n + 1 selects the beginning of each row - assuming that there are only three pictures in each row.

Phillip Gibson
Phillip Gibson
1,731 Points

Jeremy, thanks so much that was indeed the problem. I can't believe I missed that in the notes but at least this time I didn't I didn't panic when I couldn't figure it out, I have a question regarding the nth child, if I wanted 4 images in a row instead of 3 would the formula then read 4n +1?. Thanks again for your help and enjoy the rest of your day.

Jeremy Castanza
Jeremy Castanza
12,081 Points
Jeremy Castanza
Jeremy Castanza
12,081 Points

Hi Philip, no problem. For a four column gallery, you would need to adjust the nth child value and you would also need to make some adjustments to your columns and your margin widths. You would also want to consider the width of image sizes and add more pics to the gallery to balance the design.

elk6
elk6
22,916 Points
elk6
elk6
22,916 Points

Did you select the proper nth-childs in your layout? Or did you clear the floats at the proper points?

Would be a lot easier to give you some advice if you provided your code.

Phillip Gibson
Phillip Gibson
1,731 Points

My fault, here is what my code looks like for the responsive.css file:

@media screen and (min-width: 480px) {

/*****************************************************************
  TWO COLUMN LAYOUT
******************************************************************/

#Primary {
  width: 50%;
  float: left;
}

#secondary {
  width: 40%;
  float: right;
}

}

/***************************************************************** PAGE: PORTFOLIO ******************************************************************/

gallery li{

width: 28.3333%; }

gallery li:nth-child(4n) {

clear: left; }

/***************************************************************** PAGE: ABOUT ******************************************************************/

.profile-photo { float: left; margin: 0 5% 80px 0; }

@media screen and (min-width: 660px) {

/***************************************************************** HEADER ******************************************************************/

nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%;
}

logo {

float: left; margin-left: 5%; text-align: left; width: 45%;
}

h1 { font-size: 5.995em;
}

h2 { font-size: 0.945em; margin-bottom: 0.45px; }

header{ border-bottom: 25px solid #000000; margin-bottom: 45px;

and here is the code for the index.html file:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Phillip Gibson Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Arvo:400,700italic|Sigmar+One' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/Main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Phillip Gibson</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="Contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <img src="Img/MNC1a.jpg" alt=""> <p>Creating a new case mod for my computer with Adobe Photoshop</p> </li> <li> <img src="Img/MNC1c.jpg" alt=""> <p>This build is not finished yet as I would like to switch to water cooling.</p> </li> <li> <img src="Img/MNC1b.jpg" alt=""> <p>For this case I think the mod would look great here.</p> </li> <li> <img src="Img/TPC1ax.jpg" alt=""> <p>and I've chosen artwork done by some of my favorite fantasy artists.</p> </li> <li> <img src="Img/TPC1a.jpg" alt=""> <p>Using Photoshop's cuting tool and image editing capabilities</p> </li> <li> <img src="Img/TPC1b.jpg" alt=""> <p>I hope to create something that not only showcases my creative side</p> </li> <li> <img src="Img/TPC1c.jpg" alt=""> <p>but also really make my computer stand out from the rest</p> </li> <li> <img src="Img/TPC1cx.jpg" alt=""> <p>Since this is the first time I've done this, I'm not expecting perfection</p> </li> <li> <img src="Img/TPC1cxab.jpg" alt=""> <p>but I am curious to see how it turns out.</p> </li> <li> <img src="Img/TPC1d.jpg" alt=""> <p> </p>
</li> <li> <img src="Img/TPC1dx.jpg" alt=""> <p></p>
</li> <li> <img src="Img/TPC1cxa.jpg" alt=""> <p></p> </li>
</ul> </section> <footer> <a href="http://twitter.com/Philj8769"><img src="Img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/phillipgibson"><img src="Img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <a href="http://linkedin.com/in/PhillipGibson10"><img src="Img/linkedin-wrap.png" alt="Linkedin Logo" ></a> <p>© 2015 Phillip Gibson and PHIL J Enterprises.</p> </footer> </div> </body> </html>

Nyasha Chawanda
Nyasha Chawanda
7,946 Points
Nyasha Chawanda
Nyasha Chawanda
7,946 Points

you can Use the float function and also assign width values to the images to arrange them. For example if you want to put three images in the same row you can give them a width of around 30% and then use the float function to arrange them nicely.