Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

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

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.