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

Ian Ha
seal-mask
.a{fill-rule:evenodd;}techdegree
Ian Ha
Front End Web Development Techdegree Student 5,102 Points
Posted by Ian Ha
.a{fill-rule:evenodd;}techdegree
Ian Ha
Front End Web Development Techdegree Student 5,102 Points

Responsive Design of Image Gallery and the use of nth-child

Hi guys, I have some problem when I am constructing my own image gallery with the float element for both 2-column and 3-column layout.

I plan to have 13 square-like-size images for my gallery, not all 13 are exaclty perfect square, but most of them are similiar.

For different screen size, I plan to have different layout: screen size over 480px: 3-column layout screen size under 480px: 2-column layout

However, when i apply my code (even I use nth-child to do that), I found that either the 3-column layout or the 2-column layout is not working.

and I totally have no idea what is happening, can someone help me out?

my code are as below:

HTML:

<section id="yanzi_third_column">
        <h4>ALBUM</h4>
        <ul>
          <li>
            <img src="img/SunYanZi-2.jpg" alt="">
            <p>孫燕姿同名專輯</p>          
          </li>
          <li>
            <img src="img/SunYanZi-3.jpg" alt="">
            <p>我要的幸福</p>          
          </li>
          <li>
            <img src="img/SunYanZi-4.jpg" alt="">
            <p>風箏</p>
          </li>
          <li>
            <img src="img/SunYanZi-5.jpg" alt="">
            <p>Start自選集</p>
          </li>
          <li>
            <img src="img/SunYanZi-6.jpg" alt="">
            <p>Leave</p>
          </li>
          <li>
            <img src="img/SunYanZi-7.jpg" alt="">
            <p>未完成</p>
          </li>
          <li>
            <img src="img/SunYanZi-8.jpg" alt="">
            <p>The Moment</p>
          </li>
          <li>
            <img src="img/SunYanZi-9.jpg" alt="">
            <p>Stefanie</p>
          </li>
          <li>
            <img src="img/SunYanZi-10.jpg" alt="">
            <p>完美的一天</p>
          </li>
          <li>
            <img src="img/SunYanZi-11.jpg" alt="">
            <p>逆光</p>
          </li>
          <li>
            <img src="img/SunYanZi-12.jpg" alt="">
            <p>是時候</p>
          </li>
          <li>
            <img src="img/SunYanZi-13.jpg" alt="">
            <p>克卜勒</p>
          </li>
        </ul>
      </section>

MAIN.CSS:

#yanzi_third_column li {
  background-color: #b3ecff;
  display:block;
  width:44.999999%;
  margin: 2.5%;
  float:left;
}

RESPONSIVE.CSS:

@media screen and (min-width:480px) {
#yanzi_third_column li {
  background-color: #b3ecff;
  width: 28.33333%;
  margin: 2.5%;
  float:left;
  display:block;
}

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

After applying the above code, my 3-column layout works find for screen-sizve over 480px. However, the 2-column layout for screen size under 480px breaks....

after that, I try to use nth-child to fix the 2-column layout in my MAIN.CSS like below:

MAIN.CSS (2nd time try)

#yanzi_third_column li {
  background-color: #b3ecff;
  display:block;
  width:44.999999%;
  margin: 2.5%;
  float:left;
}

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

And my RESPONSIVE.CSS remains unchanged.

This time, my 2-column layout works fine. But, when screen size is over 480px, my 3-column layout breaks....

p.s. I have already successfully linked the MAIN.CSS and RESPONSIVE.CSS in cascading style, I am really stucked... aren't the HTML apply the nth-child rule in my MAIN.CSS first, then, once the screen size is over 480px, it will apply the nth-child rule in RESPONSIVE.CSS??? Am I wrong with this?

Someone please help me........

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Ian,

You're on the right track here.

To answer your question, when the 480px breakpoint kicks in the browser is still applying all the styles from main.css

So it's applying both nth-child(2n+1) and nth-child(3n+1). This breaks the 3 column layout because all the odd numbered items are clearing the floats and starting a new row.

The part that you're missing is that you no longer want the 2n+1 items to clear the floats in the 3 column layout. You need to set the clear property back to none for those items before you can have the 3n+1 items clear the floats.

In responsive.css:

#yanzi_third_column li:nth-child(2n+1) {
    clear: none;
  }

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