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

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

Rajan Chakradhar
Rajan Chakradhar
1,485 Points
Posted by Rajan Chakradhar
Rajan Chakradhar
1,485 Points

nth child problem

I have kept 6 images instead of 5 with 3 images in a row. the nth child code works fine with (min-width: 660px) but it doesn't work with (min-width: 480px). Please tell me where the problem is, I'm not being able to understand the usage of nth child with different number of images. I currently have a problem with the 3rd image. I'll copy paste the codes below.

Index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Pushpa Sthapit|Designer </title> <link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400i,700,700i,800" rel="stylesheet"> <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> Pushpa Sthapit </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> <a href="img/pic1.jpg">
<img src="img/pic1.jpg" alt=""> <p>Young Women's Entrepreneurs Summit</p> </a> </li> <li> <a href="img/pic2.jpg"> <img src="img/pic2.jpg" alt=""> <p>Girls in Technology team</p> </a> </li> <li> <a href="img/pic3.jpg"> <img src="img/pic3.jpg" alt=""> <p>Hosting Girls in Technology conference</p> </a> </li> <li> <a href="img/pic4.jpg"> <img src="img/pic4.jpg" alt=""> <p>Facilitating Shuva yatra app survey</p> </a> </li> <li> <a href="img/pic5.jpg"> <img src="img/pic5.jpg" alt=""> <p>Girls in Technology designhack competition</p> </a> </li> <li> <a href="img/pic6.jpg"> <img src="img/pic6.jpg" alt=""> <p>NYEF entrepreneurship bootcamp team</p> </a> </li> </ul> </section> </div> <footer> <a href="https://www.facebook.com/koolkidrain"><img src="img/facebook-wrap" alt="facebook logo" class="social-icon"></a> <a href="http://www.twitter.com/koolkidrain"><img src="img/twitter-wrap.png" alt="twitter logo" class="social-icon"></a> <p>Ā© 2017 Pushpa Sthapit.</p> </footer>

</body> </html>

responsive.css

/*@media screen and (min-width: 480px){ body{ background: navy; } }

@media screen and (min-width: 660px){ body{ background: green; } } */

/************************ TWO CLOUMN ************************/

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

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

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

/*********************** PAGE: PROTFOLIO ***********************/

/******************************************** 3 columns * 5 margins = 15 margin space 100-15 = 85 85/3 = 28.3333333333333 ********************************************/

gallery li {

width: 28.3333%;

}

gallery li:nth-child(4n){

clear: left;

}

/******************************** PAGE:ABOUT (making two column) ********************************/ .profile-picture{ float: left; margin:0 5% 80px 0; }

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

@media screen and (min-width:660px){ 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; }

h1{ font-size: 2.5em; }

h2{ font-size: 0.825em; margin-bottom: 20px; }

header{ border-bottom: 5px solid #d35678; margin-bottom: 60px; }

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

Hi Rajan Chakradhar ,

Two suggestions that may help.

1) Check the Markdown Cheatsheet that appears right below where you're writing in the Question/Answer box (while answering or commenting, before you submit). It gives you some tips on how to post formatted code in the forum. That will surely help you get better answers. NOTE: Another option, maybe even better, is making a snapshot of your Workspaces and sharing it here (you'll find the button at the top-right of your WS).

2) Check the Teacher's Notes, just below the video player, and follow the suggestion provided there (i.e.: :nth-child(3n+1)). Does that solve your issue?

Otherwise, here we are. :)

Kathryn Notson
Kathryn Notson
25,941 Points

Rajan Chakradhar:

Are you omitting the "#" syntax from your id's in your CSS stylesheet? The "#" syntax is used to select id's & "." is used to select classes in your CSS stylesheet.