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 trialPhillip Gibson
1,731 PointsSome 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?
3 Answers
Jeremy Castanza
12,081 PointsPhilip, 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
1,731 PointsJeremy, 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
12,081 PointsHi 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
22,916 PointsDid 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
1,731 PointsMy 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
7,946 Pointsyou 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.
Sam Baines
4,315 PointsSam Baines
4,315 PointsHi Phillip - if you post your code (css & html) then maybe someone can have a look and see if they can help.