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

Posted by Nadah Feteih
Nadah Feteih
1,608 Points

Nav elements no longer in header

After following the video and working on the responsive.css file, I got stuck when it was time to shifting the nav elements to the right in the wider screen setting. I followed exactly what he had written but instead of just aligning it to the right, the nav elements are moved down and basically out of the header.It is also shifting the photo on the left in the body up a little bit. I'm stuck now and dont know how to fix it.

2 Answers

jase richards
jase richards
10,379 Points
jase richards
jase richards
10,379 Points

Could you post your coding to see where there may be a mistake

Nadah Feteih
Nadah Feteih
1,608 Points
Nadah Feteih
Nadah Feteih
1,608 Points

My index.html file: 

<!DOCTYPE html> 
<html>
  <head>
    <meta charset="utf-8">
    <title> Nadah Feteih | Photographer</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, intial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nadah Feteih</h1> 
        <h2> Designer </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>Playing with blending modes in photoshop</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in photoshop</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Playing with blending modes in photoshop</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Playing with blending modes in photoshop</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Playing with blending modes in photoshop</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">
        <a href = "http://facebook.com/nadah.feteih"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Nadah Feteih.</p>
      </footer>
      </div>
  </body>
</html>

Responsive.css file: 

@media screen and (min-width: 480px){
  /*******************************
Two Coloumn 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; 
  }
  .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%;
  }
  h1{
   font-size: 2.5em; 
  }
  h2{
    font-size: 0.825em; 
    margin-bottom: 20px; 
  }
  header{
   border-bottom:  5px solid #599a68;  
  }
}

Main.css file: 

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

a{
  text-decoration: none; 
}

img {
  max-width: 100%;  
}
h3 {
 margin: 0 0 1em 0;  
}

#wrapper{
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%; 
}
/*******************************
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;
 padding-top: 50px;
  color: #ccc; 
  clear: both;
}
.social-icon{
  width: 20px;
  height: 20px;
  margin: 0 5px; 
}
/*******************************
Page Postfolio
********************************/
#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; 
}

/*******************************
COLORS
********************************/
/*******************************
Page Postfolio
********************************/
.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');
}

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

/* site body*/
body{
 background-color: #fff;
  color: #999; 
}
/* green header*/
header{
  background: #6ab47b;
  border-color: #599a68; 
}
/* nav background on mobile*/
nav{
  background: #599a68;
}
/* logo text*/
h1, h2 {
  color: #fff;  
}
a{
 color: #6ab47b;  
}
/* nav link*/
nav a, nav a:visited {
  color: #fff;
}

nav a.selected, nav a:hover {
 color: #32673f;  
}

Does anything else need to be posted?