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 Website Testing

Shai Yahav
Shai Yahav
7,153 Points
Posted by Shai Yahav
Shai Yahav
7,153 Points

My About page and navigation bar are not as Nick page

Hi, I have a gap for the header on the about page wich I don't have on other pages

When I change the browser to use small resolution the navigation bar is not as the video in one line, it changes to be one on the top of another

Joshua Mardan
Joshua Mardan
11,788 Points
Joshua Mardan
Joshua Mardan
11,788 Points

Can you post your code?

4 Answers

Shai Yahav
Shai Yahav
7,153 Points
Shai Yahav
Shai Yahav
7,153 Points

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Shai Yahav | Web Developer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Shai Yahav</h1>
        <h2>Front End Web Developer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
   <div id="wrapper">
    <section>
      <ul id="gallery">
        <li>
          <a href="img/numbers-01.jpg">
            <img src="img/numbers-01.jpg" alt"">
            <p>Experimentation with color and texture.</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-02.jpg">
            <img src="img/numbers-02.jpg" alt"">
            <p>Playing with blending modes.</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-06.jpg">
            <img src="img/numbers-06.jpg" alt"">
            <p>Trying to create 80's style of glows.</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-09.jpg">
            <img src="img/numbers-09.jpg" alt"">
            <p>Drips created using photoshop</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-12.jpg">
            <img src="img/numbers-12.jpg" alt"">
            <p>Creating shapes using repetition</p>
          </a>
        </li>
       </ul>
    </section>
    <footer>
      <a href="https://www.facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
      <a href="https://www.twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
      <p>&copy; 2014 Shai Yahav.</p>
    </footer>
   </div>
  </body>
</html>


about.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Shai Yahav | Web Developer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Shai Yahav</h1>
        <h2>Front End Web Developer</h2>>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
   <div id="wrapper">
    <section>
      <img src="img/shai.jpg" alt="Photograph of Shai Yahav" class="profile-photo">
     <h3>About</h3>
     <p>Hi, My name is Shai Yahav! This is my first site :)</p>
     <p>If you'd like to email me, press here</p>
    </section>
     <footer>
      <a href="https://www.facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
      <a href="https://www.twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
      <p>&copy; 2014 Shai Yahav.</p>
    </footer>
   </div>
  </body>
</html>

main.css:

/*********************
General
*********************/

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

}

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

a {
  text-decoration:none;
}

img {
  max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;
}



/* *******************
HEADING
*********************/

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


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

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

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

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}


/*********************
FOOTER
*********************/


footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
 }

/*********************
PAGE PORTFOLIO
*********************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;

}


/*********************
PAGE ABOUT
*********************/

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;

}


/*********************
PAGE CONTACT
*********************/

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;  
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat:no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

/* *******************
COLORS
*********************/


/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header */
header {
  background: #64b47b;
  border-color: #599a68;
}

/* nav background on mobile */
nav {
  background: #599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/*  links */
a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
  color: #fff;
}
/* selected nav link */  
nav a.selected, nav a:hover {
  color: #32673f;
}
Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Shai,

I've edited your code so it appears correct in your post.

Here is a link to explain how to use Markdown to post your code How to post code If you look at the bottom of the box when your typing a reply you will see Markdown Cheatsheet that will also explain how to post your code

Hope this helps.

Shai Yahav
Shai Yahav
7,153 Points
Shai Yahav
Shai Yahav
7,153 Points

It got mixed up a little with all the marks but on my workspace it looks ok

Hernan Martin Demczuk
Hernan Martin Demczuk
1,264 Points
Hernan Martin Demczuk
Hernan Martin Demczuk
1,264 Points

Maybe the name is too long and is using too much space so nav bar has to split in two different lines. Try changing the font size to a smaller one or even reduce the margins to see if that is the problem!