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

Posted by Jae Kim
Jae Kim
597 Points

When I resize my website to a certain size, the nav no longer remains aligned.

When I resize my website to a certain size, the nav no longer remains aligned; that is, my portfolio and my about nav is "on top of" my contact. This is under the "Responsiveness" section of the lesson.

Simon Sørensen
Simon Sørensen
17,304 Points

Can we have a look? Maybe upload/or send a link to workspaces?

-Simon

Jae Kim
Jae Kim
597 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jae Kim | 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>Jae Kim</h1>
        <h2>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>Another with color and texture.</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>Trying to create an 80's style of glows</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="http://twitter.com/mrkimaa"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; Jae Kim 2014</p>
      </footer>
    </div>
  </body>
</html>
Simon Sørensen
Simon Sørensen
17,304 Points

I'll need both stylesheets as well.

Jae Kim
Jae Kim
597 Points 
/*********************************************
GENERAL
**********************************************/

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%; /*fill the width of the parent container, if the container shrinks, the images will shrink*/
}

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; /*Though we could not see any bullet points, we want to make sure*/
  margin: 0 10px; 
  padding: 0; 
}

nav li {
 display: inline-block; /*This makes the nav in-line horizontally instead of vertically*/
}

nav a {
  font-weight: 800; /*Makes the fonts thicker and the range where you can click is increased*/
  padding: 15px 10px; 
}



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

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both; /*Clear property allows the footer to be clear of any floated elements*/
  padding-top: 50px;
  color: #ccc; 
}

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



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

#gallery {
  margin: 0;
  padding: 0;
  list-style: none; /*Removes all the bullet points, if there are any*/
}

#gallery li {
  float: left; 
  width: 45%; /*Will only take 45% of the width*/
  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; /*Allows us to use auto margins to center the page similar to wrapper div*/
  max-width: 150px; /*No larger than 150px*/
  margin: 0 auto 30px; 
  border-radius: 100%; /*Gives rounded corners to an element, you can use pixels*/
}



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

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

.contact-info a {
  display: block; /*Each one of our anchor elements will take up space*/
  min-height: 20px;
  background-repeat: no-repeat; /*Only display once*/
  background-size: 20px 20px; /*Resize the background*/
  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');
}

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



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

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

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

/* nav link */
nav a, nav a:visited {
 color: #fff;  
}

/* selected nav link */
nav a.selected, nav a:hover {
 color: #32673f; 
}
Jae Kim
Jae Kim
597 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jae Kim | 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>Jae Kim</h1>
        <h2>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/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">
        <h3>About</h3>
        <p>Hi, I'm Jae Kim! This is my design portofio where I share all of my favorite work. When I'm not designing things, I enjoy excercising, playing video games, drinking good cofee, and more.</p>
        <p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/mrkimaa"> @mrkimaaa</a></p>
      </section>
      <footer>
        <a href="http://twitter.com/mrkimaa"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; Jae Kim 2014</p>
      </footer>
    </div>
  </body>
</html>
Jae Kim
Jae Kim
597 Points 
@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) {



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

  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; 
  }
}
Jae Kim
Jae Kim
597 Points

Also, if I share the link to my workspace will other people have access to edit my code? Or just to look? And thank you for your consideration.

Simon Sørensen
Simon Sørensen
17,304 Points

http://port-80-5hz4neuexa.treehouse-app.com/

I've created a workspace to quickly see your code. Only I can edit it now, and everybody can see it if I share my link.

I don't really see any problem, so what do you say is wrong here?

1 Answer

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi,

You look to have a float and text align of right in the nav style under the following:

@media screen and (min-width: 660px) {



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

  nav {
    background: none;
    float: right;
    font-size: 1.125em; 
    margin-right: 5%;
    text-align: right;
    width: 45%;
  }

This could be either be overriding the first one you have set to center or the float right could be affecting it:

/*********************************************
Navigation
**********************************************/

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

If it's the float try setting a clear: both; on the wrapper.

Thanks

-Rich