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 Build a Three Column Layout

Kate Petry
PLUS
Kate Petry
Courses Plus Student 9,432 Points
Posted by Kate Petry
Kate Petry
Courses Plus Student 9,432 Points

Three column layout on desktop doesn't look correct

I can get the three column layout to work but when I display it on the desktop, the images don't fill the page, but rather they are showing on the left side kind of small. I think it has something to do with the responsive.css which I pasted below but I'm not sure what. If I remove the responsive.css file from the index.html page then all looks ok. Any guidance would be appreciated. I would add a pic of how it looks on the desktop but I'm not sure how to do that

@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%;
      margin: 2.5%;

  }

  #gallery li:nth-child(3n + 1) {
      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 #599a68;
    margin-bottom: 60px;
  }

  #gallery li {
      width: 28.3333%;
  }

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

      }

5 Answers

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

I think you are missing the margins on your code for the Portfolio page. Should be 2.5% margins on your list items.

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

  #gallery li {
      width: 28.3333%;
      margin: 2.5%;

  }

  #gallery li:nth-child(3n + 1) {
      clear: left;
  }
Kate Petry
PLUS
Kate Petry
Courses Plus Student 9,432 Points
Kate Petry
Kate Petry
Courses Plus Student 9,432 Points

Thanks. I tried adding it and I still have the same problem - nothing changed. Maybe the problem isn't in the responsive css.

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

I was looking at the wrong css file for my page. You actually don't need the margin, but try changign 3n+1 to 4n

/*****************************
    PAGE: PORTFOLIO;
    *****************************/
    #gallery li {
        width: 28.3333%;
    }
    #gallery li:nth-child(4n) {
        clear: left;
    }
Kate Petry
PLUS
Kate Petry
Courses Plus Student 9,432 Points
Kate Petry
Kate Petry
Courses Plus Student 9,432 Points

I've tried that too. I'm trying to figure out the screen shot. If I can get that uploaded maybe that will help explain

Kate Petry
PLUS
Kate Petry
Courses Plus Student 9,432 Points
Kate Petry
Kate Petry
Courses Plus Student 9,432 Points

Here is a link to what I am seeing.

![my screenshot/ image link]Imgur