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 Responsive Web Design

Gabriel Rowe
Gabriel Rowe
5,204 Points
Posted by Gabriel Rowe
Gabriel Rowe
5,204 Points

My Portfolio, About, & Contact move when I minimize my browser window

I only just recently noticed that my 'contact' link is no longer in line with About and Portfolio when I make my browser the smallest I can.

I am assuming this has to do with my CSS code. Here is my code for my header section. 

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

#logo {
  text-align: center;
  margin: 0;
}

h1{
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0 ;
  font-weight: normal;
}

Any suggestions? Thanks so much!

Jake Steel
Jake Steel
5,048 Points
Jake Steel
Jake Steel
5,048 Points

line-height: 0.8em ( make sure you have a semi-colon at the end of the line-height) also try to eliminate any extra spaces. like in the h2 element with the margins. This should help. in the h1 you def need to include a semi colon tho, hope this helps.

2 Answers

Gabriel Rowe
Gabriel Rowe
5,204 Points
Gabriel Rowe
Gabriel Rowe
5,204 Points

Thanks! Unfortunately, that didn't work. Maybe someone else can take a look at the body section of my css?

body {
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img{
  max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;
}

Thanks in advance!

Anthony Conti
Anthony Conti
2,606 Points

Gabriel,

Hi, I'm Anthony. I was looking over your question because I was experiencing the same issues. After tinkering around with the CSS, I noticed that we wanted to achieve the same technique we used with the images in our <section> tag on the index.html page. You're in the right place with your #wrapper code there; you essentially want to do the same thing but to your navigation in the CSS.

Here is my code:

/************************************************** NAVIGATION ***************************************************/

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

nav ul { list-style: none; margin: 0 0px; padding: 0; }

nav li { display: inline-block; max-width: 45%; padding: 0 1.5%; }

nav a { font-weight: 800; }

You see how I have the max-width set to 45% and the padding set to 0 1.5%.

Gabriel Rowe
Gabriel Rowe
5,204 Points
Gabriel Rowe
Gabriel Rowe
5,204 Points

Thanks Anthony! That worked.

Anthony Conti
Anthony Conti
2,606 Points

Awesome! No problem.