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
vanessa grzywacz
732 PointsAdding my own images but they don't line up across the page? nth child problem?
whats wrong with the code. Am adding my own images in place of nicks but they don't flow properly across the width of the page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vanessa Grzywacz I Graphic Designer I Magazine Art Director I stylist </title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' 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>Vanessa Grzywacz</h1>
<h2>Graphic Designer and Magazine Art Director</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>
<a href="img/juliacover.jpg">
<img src="img/juliacover.jpg"alt="">
<p></p>
</a>
</li>
<li>
<a href="img/CAREY.jpg">
<img src="img/CAREY.jpg"alt="">
<p></p>
</a>
</li>
<li>
<a href="img/george.jpg">
<img src="img/george.jpg"alt="">
<p> </p>
</a>
</li>
<li>
<a href="img/frank.jpg">
<img src="img/frank.jpg"alt="">
<p> </p>
</a>
</li>
<li>
<a href="img/frank2.jpg">
<img src="img/frank2.jpg"alt="">
<p> </p>
</a>
</li>
<li>
<a href="img/flourish.jpg">
<img src="img/flourish.jpg"alt="">
<p> </p>
</a>
</li>
<li>
<a href="img/craig.jpg">
<img src="img/craig.jpg"alt="">
<p> </p>
</a>
<li>
</li>
<li>
<a href="img/ice.jpg">
<img src="img/ice.jpg"alt="">
<p> </p>
</a>
</li>
<li>
<a href="img/susan.jpg">
<img src="img/susan.jpg"alt="">
<p> </p>
</a>
</li>
<li>
<a href="img/ali.jpg">
<img src="img/ali.jpg"alt="">
<p> </p>
</a>
</li>
<li>
<a href="img/careerpath.jpg">
<img src="img/careerpath.jpg"alt="">
<p> </p>
</a>
</li>
<li>
<a href="img/chiara1.jpg">
<img src="img/chiara1.jpg"alt="">
<p> </p>
</a>
</li>
<li>
<a href="img/clothes.jpg">
<img src="img/clothes.jpg"alt="">
<p> </p>
</a>
</li>
<li>
<li>
<a href="img/fitin.jpg">
<img src="img/fitin.jpg"alt="">
<p> </p>
</a>
</li>
<li>
<li>
<a href="img/ice.jpg">
<img src="img/ice.jpg"alt="">
<p> </p>
</a>
</li>
<li>
</ul>
</section>
<footer>
<a href="http://twitter.com/@Vanessagrzywacz"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/vanessawalkergrzywacz"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2015 Vanessa Grzywacz.</p>
</footer>
</div>
</body>
</html>
7 Answers
rdaniels
27,258 PointsYou need to also show your css stylesheet to show what that is making your html sheet do....
vanessa grzywacz
732 Points@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:3em; } h2{ font-size:1em; margin-bottom: 20px; } header { border-bottom:5px solid #fff; margin-bottom:60px; } }
rdaniels
27,258 PointsI think where Nick used "nth-child(4n)", he was using 4n to move the fourth picture to to the left of the page. Since yours is the seventh picture, you should use 7n in the place of 4n.... That should move that picture specifically... Hope this helps! Please let me know...
vanessa grzywacz
732 PointsThanks that worked but now I have one picture on the left on the 3rd row and then a gap and then a picture on the right? each row has 2 pictures on but then a gap… can you help again!
rdaniels
27,258 PointsI would try experimenting with the top and bottom margins for the divs. If the margins are to big (spaces too large between images) try using a smaller value. Same with maybe too much space on the sides or down the middle (between two pics on one row). Play with the numbers and find the spacing that suits your own taste. Hope this helps you!!
vanessa grzywacz
732 PointsThanks! Is that in this bit? in the main css? PAGE PoRTFOLIO ***************************/
gallery{
margin: 0; padding: 0; list-style: none; }
gallery li{
float: left; width: 45%; margin: 2.5%; background-color: #fff; color: #3d3d3d; }
gallery li a p{
margin: 0; padding: 5%; font-size: 0.75em; color: #3d3d3d; } /************
rdaniels
27,258 PointsI think it would be in the css #gallery li:
#gallery li {
margin-top: /* some value in px */;
margin-bottom: /* some value in px */;
margin-left: /* some value in px */;
margin-right: /* some value in px */;
}
hope this helps... Please let me know. Write down what the values are before you change them, so that you can change them back to the original values if you need to while experimenting...
vanessa grzywacz
732 Pointsvanessa grzywacz
732 PointsHi I've added the css. Are you able to help? The first two rows of the 3 column layout each have 3 images on them but then after that the 7th image on row 3 sits in the middle of the row on its own? I want it to sit on the left of the row as on the previous two rows.Thanks!