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 trialKate Petry
Courses Plus Student 9,432 PointsThree 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
Treehouse Project ReviewerI 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
Courses Plus Student 9,432 PointsThanks. I tried adding it and I still have the same problem - nothing changed. Maybe the problem isn't in the responsive css.
Emma Willmann
Treehouse Project ReviewerI 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
Courses Plus Student 9,432 PointsI'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
Courses Plus Student 9,432 PointsHere is a link to what I am seeing.
![my screenshot/ image link]Imgur