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

Posted by Mary Nowak
Mary Nowak
1,441 Points

How to Make a Website/Adjust the Profile Page and Header ; header floats left, but won't go down?

I can get my header to float to the left when I increase the page size, but it stays at the top left, instead of adjusting to bottom left. Maybe something wrong with my responsive.css?

@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(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; }

}

tootiemcflow
tootiemcflow
5,601 Points

Hey Mary, could you take a Snapshot of your Workspace? You can create a Snapshot by click on the camera icon in the top right corner of Workspaces.

Mary Nowak
Mary Nowak
1,441 Points

Not sure exactly how to use Snapshot. Instructions say to "4. Visit the link and share it with someone." Does that mean include the link that it's created? Or am I now supposed to copy and paste from that snapshot link?

tootiemcflow
tootiemcflow
5,601 Points

If you open up your Snapshot you created, you can just copy that link. Link will look something like this https://w.trhou.se/u8y7su4o98.

Mary Nowak
Mary Nowak
1,441 Points

Ah! I get it! :-) Here you go: https://w.trhou.se/wvdgf9pl69

1 Answer

tootiemcflow
tootiemcflow
5,601 Points

Okay, sorry for the wait. This took me a minute to find.

The problem is actually in your main.css file. On nav element selector you have 20px margin being applied to all sides. Which is causing conflicts with the widths on the nav/logo.

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px;
}

So, if you specify margin-top: 20px; it should fix the problem.

nav {
  text-align: center;
  padding: 10px 0;
  margin-top: 20px;
}

You could also use margins short-hand property. Just make sure specify 0 values for left, right, and bottom sides.

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0 0;
}
Mary Nowak
Mary Nowak
1,441 Points

That's it! Worked like a charm! Thank you so much- I had a suspicion it was something I had done wrong in an earlier step but wasn't sure quite where to look. Thanks again! :-)

tootiemcflow
tootiemcflow
5,601 Points

@marynowak No problem, glad I could help.