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 How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Ryne Smith
Ryne Smith
1,297 Points
Posted by Ryne Smith
Ryne Smith
1,297 Points

Ensuring the two-column layout is even as well.

In the video, Nick showed us how to make sure that the three-column layout is even by clearing each first list item in a row using the nth-child pseudo class.

However, since my own captions created the same issues in the two-column format as well I created my own fix through some trial and error.

Since this is a Mobile First process, I thought about putting the code in the main.css and then overriding it with the larger screen size rules in the responsive.css file, but it just seems less organized that way. Any thoughts?

Does anyone have any suggestions in a better or cleaner way of doing this?

Here is my responsive.css with my fix at the top. 

@media screen and (max-width: 479px) {

  /*****************************
  PORTFOLIO TWO-COLUMN FIX
  ******************************/

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


@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(3n+1) {
    clear: left;
  }



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

  .profile-photo {
    float: left;
    margin: 0 5% 80px;
  }

}

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

}

1 Answer

Radu Ioan Stochita
Radu Ioan Stochita
3,558 Points
Radu Ioan Stochita
Radu Ioan Stochita
3,558 Points

You can do it however you like it, but I recommend putting the media queries in a separate file, because the CSS is clean and it's divided into two sections: responsive and general.