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

Posted by Mohammed Mitha
Mohammed Mitha
1,173 Points

Nick Pettit CSS Project

I downloaded the project files from Nick Pettit's course and the only changes I made was change the color's and substituted my images which have the exact same dimension as the project images (1024 x 768), however on the Portfolio page only seems to style two rows and then skips one row and repeats this process.

It does this on the desktop screen, iPad screen and the iPhone 6 screen.

The example can be found at modesignlab.com.

Please help.

INDEX.HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nick Pettit | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,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><img src="img/logo.png" alt=""></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 src="img/kwsw1.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="#"> <img src="img/kwsw2.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href="#"> <img src="img/kwsw3.jpg" alt=""> <p>Trying to create an 80's style of glows.</p> </a> </li> <li> <a href="#"> <img src="img/kwsw4.jpg" alt=""> <p>Drips created using Photoshop brushes.</p> </a> </li> <li> <a href="#"> <img src="img/kwsw5.jpg" alt=""> <p>Creating shapes using repetition.</p> </a> </li> <li> <a href="#"> <img src="img/kwsw6.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="#"> <img src="img/kwsw7.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href="#"> <img src="img/kwsw8.jpg" alt=""> <p>Trying to create an 80's style of glows.</p> </a> </li> <li> <a href="#"> <img src="img/kwsw9.jpg" alt=""> <p>Drips created using Photoshop brushes.</p> </a> </li> 

      <li>
        <a href="#">
          <img src="img/adersson.jpg" alt="">
          <p>Trying to create an 80's style of glows.</p>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="img/elizabeth.jpg" alt="">
          <p>Drips created using Photoshop brushes.</p>
        </a>
      </li>     
    </ul>
  </section>
  <footer>
    <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
    <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
    <p>&copy; 2014 Nick Pettit.</p>
  </footer>
</div>

</body> </html>

MAIN.CSS /********************************** GENERAL ***********************************/

body { font-family: 'Open Sans', sans-serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0; }

/********************************** HEADING ***********************************/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Open Sans', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/********************************** NAVIGATION ***********************************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 400; padding: 15px 10px; }

/********************************** FOOTER ***********************************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

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

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7 }

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

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

/********************************** PAGE: CONTACT ***********************************/

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }

.contact-info li.phone a { background-image: url('../img/phone.png'); }

.contact-info li.mail a { background-image: url('../img/mail.png'); }

.contact-info li.twitter a { background-image: url('../img/twitter.png'); }

/********************************** COLORS ***********************************/

/* site body */ body { background-color: #fff; color: #999; }

/* green header */ header { background: #fff; border-color: #0084b4; }

/* nav background on mobile */ nav { background: #00aced; }

/* logo text */ h1, h2 { color: #fff; }

/* links */ a { color: #00aced; }

/* nav link */ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover { color: #000; }

RESPONSIVE.CSS @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: 2.5em; }

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

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

/* nav link */ nav a, nav a:visited { color: #000; }

nav a.selected, nav a:hover { color: #00aced; } }

3 Answers

johnathanmyers
johnathanmyers
19,994 Points

I believe this should correct the problem...

  #gallery li:nth-last-child(3n+2) {
    float: left;
    clear: left;
  }

Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.

Learn more about nth child and experiment here... http://www.w3schools.com/cssref/sel_nth-last-child.asp

Mohammed Mitha
Mohammed Mitha
1,173 Points

Thank you, will try that.

Mohammed Mitha
Mohammed Mitha
1,173 Points

Ok, it's working however it worked with 3n+1. Thanks again.

Mark VonGyer
Mark VonGyer
21,239 Points
Mark VonGyer
Mark VonGyer
21,239 Points

Hi Mo.

I went on your website. It appears all fine on my desktop in all screen sizes.

standard size of 1920x1280.

Mark VonGyer
Mark VonGyer
21,239 Points

If your asking why it is skipping a line on every 3rd line, it is due to the media query setting the nth-child to clear left.

Mohammed Mitha
Mohammed Mitha
1,173 Points

Thank you Mark

Mohammed Mitha
Mohammed Mitha
1,173 Points
Mohammed Mitha
Mohammed Mitha
1,173 Points

Yeah it is skipping on the 3rd and the 5th line.