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

HTML How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

My logo goes away and links are under the wrapper

Within my responsive.css. There seems to be a small gap at the top above the wrapper also. Trying to figure out if that's related. Before adding the last 16 lines of code it was fine.

/********************** @media screen and (min-width: 400px) {

/********************** 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: 33%; }

logo {

  float: left;
  margin-left: 5%;
  text-align: left;

}

} ***********************/

Hi Gwen,

Can you post a snapshot of your workspace? That would make it easier to troubleshoot the problem.

2 Answers

Hi Gwen,

One thing I'm noticing is that you seem to be missing the styling for your header element.

You can add the following to your HEADING section of "main.css":

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

This should fix at least a few of the problems you're experiencing.

Another issue I saw was that in your responsive.css file you set your h2 font-size to be 0825em.

h2 { 
  font-size: 0825em;
  margin-bottom: 20px;
  }

It should be 0.825em with a decimal point.

See where you're at after making those changes.

Post back with an updated snapshot if you're still seeing some problems.

That fixed it! Thanks!

Alejandro Narvaja
PLUS
Alejandro Narvaja
Courses Plus Student 7,340 Points

Gwen, try do a snapshot of your Workshape here in TreeHouse. It allow us test your code. Thanks.