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
Rich Braymiller
7,119 PointsCan't figure out why I have 3 column for my Portfolio page.....
I cannot figure out for the life of me what I did wrong...I've been working on this thing all day...pretty frustrated and fatigued....
Website http://port-80-wlyqqw3e9y.treehouse-app.com/index.html
Code:
@media screen and (min-width: 480px) { /*********************************** TWO COLUMN LAYOUT ************************************/
primary {
width: 50%;
float: left;
}
secondary {
width: 40%;
float: right;
}
/****************************************** 3 * 5 = 15 100% - 15% = 85% 85 / 3 = 28.33333333
*******************************************/
/****************************************** Page: Portfolio *******************************************/
#gallery { width: 28.3333%; }
#gallery li:nth-child(4n) { 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;
}
}
1 Answer
Alex Heil
53,547 Pointshey Rich Braymiller , from looking at your site I guess you want to have a 2-column layout on a small viewport and then a 3-column layout on a bigger screen, right?
if so there's a tiny little error in the code that currently prevents it. you currently use this code
#gallery { width: 28.3333%; }
what it does is that it shrinks the CONTAINER (in this case the unordered list) to about a third while you actually want to target the ITEMS (list items) instead.
if you change the code to this:
#gallery li { width: 28.3333%; }
then on a bigger screen your gallery looks absolutely fine. hope that helps and have a nice day ;)