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

Rich Braymiller
Rich Braymiller
7,119 Points

Can'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
Alex Heil
53,547 Points

hey 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 ;)