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 Max Reinsch
Max Reinsch
5,740 Points

Build a Three Column Layout- Gallery images

I doubled the amount of images in my gallery and changed the CSS as shown below. The third row displays just 1 image that is in the center then it continues as side-by-side images in the following row.

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

/***********************
Two column layout
***********************/

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

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

/***********************
(margins for li items are 2.5% each side). We aim to have 3 items side by side.
  3 * 5 = 15
  100% - 15%
  85 / 3 = 28.33333333333333  
***********************/

/***********************
Page: Portfolio
***********************/

  #gallery li {
   width:28.3333%; 
  }

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

}

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

}

1 Answer

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Max,

That would be your 7th image correct? Then your 8th image appears at the beginning of the 4th row?

It's behaving as if you used :nth-child(4n) as shown in the video. Is there any chance you used 4n before noticing the Teacher's Notes and then forgot to save and refresh?

Max Reinsch
Max Reinsch
5,740 Points

https://www.dropbox.com/s/k1itbmgtd2qd0zy/4n.jpg

With 4n.

https://www.dropbox.com/s/grcdmnq9ui1f3zb/3n1.jpg

with 3n + 1.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Can you post your html for the gallery?

Max Reinsch
Max Reinsch
5,740 Points 
<section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture</p>
            </a>  
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop</p>
            </a>  
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
            </a>  
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using Photoshop brushes.</p>
            </a>  
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture</p>
            </a>  
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop</p>
            </a>  
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
            </a>  
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using Photoshop brushes.</p>
            </a>  
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>  
          </li>
        </ul>
      </section>
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

This problem was about to drive me crazy. I could not explain either of the screenshots.

I finally noticed that you have your number 12 image and number 1 image together in the same list item.

<li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture</p>
            </a>  
          </li>

Now the screenshots make sense.

Get those in their own list items and I think you'll be ok. Stay with 3n + 1. 4n won't work with that many images.

Max Reinsch
Max Reinsch
5,740 Points

What a silly bloody mistake! Thank you and sorry for the headache. =)

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome.