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

Watch Video

Posted January 14, 2015 7:45pm by

The navigation bar disappears when the webpage is expanded out from the mobile site.

When I expand out from the mobile view of the webpage, the navigation banner disappears from view leaving the three links floating in the right place.

The first column then seems to fill the empty space and move up to just below the header where the navigation bar should be.

Have I mis-coded something?

January 14, 2015 7:49pm

@media screen and (min-width: 480px) {
  /***********************************
  TWO COLUN 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: 45%
  }

}

January 14, 2015 7:49pm

/***********************************
GENERAL
************************************/

body {
  font-family: 'Shadows Into Light', 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;
]



/***********************************
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: 'Permanent Marker', 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');
}

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

January 18, 2015 4:26am

Wayne, I am having the same problem but I don't follow your answer to Matthew. I looked at the code you provided in CodePen (sorry I don't have an account right now). I am going to post the same question with my own code. Thank you as always.

7 Answers

January 15, 2015 1:45am

Hey Matthew,

Here is a link to the codepen I've changed the logo and nav font to the fonts you had in your code.
I've added a random image into the code just so there was something there to see, I also added a little padding but i highlighted this in the css with /* added for effect *********************/ so this can be removed when your done with the codepen and have the css back in workspaces or whatever code editor your using.

I added a /* changed this */ to the place I made a change so you can see.
There was also a missing semi-colon which i added a note too.

So if you go ahead and make the changes to the font size and colours you want, then see how it looks from there.

If you don't have a codepen account, id recommend getting one, its great for sharing or working with code.

January 15, 2015 3:40pm

Brilliant! Thank you so much for all your help, Wayne, It's really appreciated!

I'll definitely sign up for a codepen account, it seems really useful.

January 15, 2015 4:41pm

No problem Matthew, good luck with the rest of the course.

January 15, 2015 4:45pm

Thank you! :)

January 14, 2015 8:57pm

Hi Matthew,

You should start by changing your first media query from,

@media screen and (min-width: 480px)

@media screen and (max-width: 659px)

As the way you have them now, they are both active when the viewport is 660px. Then we can take it from there is the problem still exists.

Hope this helps.

January 14, 2015 8:59pm

Can you post you html too, so i can run your code please.

January 14, 2015 9:01pm

Thank you, here it is.

January 14, 2015 9:02pm

I was looking for the media queries. :)

My first thought was that if there banner was disappeared but taking up the space there was a faulty background colour in there or something.

January 14, 2015 9:02pm

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Matt Gerrie | Photographer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800|Permanent+Marker|Shadows+Into+Light|Indie+Flower|Comfortaa:400,700,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Matt Gerrie</h1>
        <h2>Photographer</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 in photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 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 brushes.</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>
        <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">
        <a href="http://facebook.com/matthew.gerrie.7"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Matt Gerrie.</p>
      </footer>
    </div>
  </body>
</html>

January 14, 2015 9:06pm

I've tried changing the first media query but I'm still having the same issues, and as I've moved on with the lesson I've found that I'm now getting the same problem with the header too. :S

January 14, 2015 9:11pm

Hi Matthew,

So, its this media query thats causing your issues.

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

  /***********************************
  HEADER
  ************************************/

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

}

Its starting at 660px and goes on to cover all viewport sizes above that.
Are you sure thats what you intensions are? as the website looks fine in full screen without that media query added.
What effect are you looking for when the viewport is a normal screen?

January 14, 2015 9:17pm

This is how it looks on my 15" MacBook Pro

alt text

Proportions maybe a bit off as i resized the img.

January 14, 2015 9:22pm

I'm following the video 'Adjust the profile page and header' in the 'How to make your own website' course, so I'm trying to get it to do the same as the example in the video.

January 14, 2015 9:27pm

I've been following the coding along with the video step-by-step, but I can't figure out what I've done differently to get these results.

January 14, 2015 9:35pm

I think i see what your looking for, something like this (i changed text to red just so you can see it, also i have no images in the code so you will only see the question mark)

alt text

January 14, 2015 10:11pm

Sort of, here's the example code from the video, this is what I'm trying to do but with changes to the font etc

January 14, 2015 10:12pm

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

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

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

January 14, 2015 10:13pm

@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) {

  /**********************************
  HEADER
  ***********************************/

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


}

January 14, 2015 10:14pm

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</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>Nick Pettit</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>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 in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 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 brushes.</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/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Nick Pettit.</p>
      </footer>
    </div>
  </body>
</html>

January 14, 2015 10:45pm

Hi Matthew,

Why can't you use that code and just change the fonts etc?

January 14, 2015 10:48pm

In the code you have you have deleted the things like logo float left that would have given your code the appearance you wanted.

January 14, 2015 10:53pm

Matthew,

when you add css code you need to add css after the back ticks. I edited your code.

alt text

Hope this helps.

January 14, 2015 10:55pm

If you explain exactly what changes you wish to make we can put your code in codepen and work on it there.

January 14, 2015 11:11pm

Thanks for your patience and help Wayne, as you can tell I'm still a bit new to all this :S

I was looking to change the default font to 'Shadows Into Light' and change the font of the logo to 'Permanent Marker' , like in the second code I submitted, and change the font size to be more closely matched with the example.

As well as changing the names and social media links to be my own I was also going to change the overall color scheme and eventually change the pictures for my own.

January 14, 2015 11:18pm

It's not a problem Matthew, we all start at the same place.

The changes you want to make are straight forward, we can do them in codepen.
Give me a moment to set things up and i'll post a link.

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Matthew Gerrie

Matthew Gerrie

The navigation bar disappears when the webpage is expanded out from the mobile site.

Matthew Gerrie

Matthew Gerrie

Matthew Gerrie

Matthew Gerrie

dotz

dotz

7 Answers

Wayne Priestley

Wayne Priestley

Matthew Gerrie

Matthew Gerrie

Wayne Priestley

Wayne Priestley

Matthew Gerrie

Matthew Gerrie

Wayne Priestley

Wayne Priestley

Wayne Priestley

Wayne Priestley

Matthew Gerrie

Matthew Gerrie

Jonathan Grieve

Jonathan Grieve

Matthew Gerrie

Matthew Gerrie

Matthew Gerrie

Matthew Gerrie

Wayne Priestley

Wayne Priestley

Wayne Priestley

Wayne Priestley

Matthew Gerrie

Matthew Gerrie

Matthew Gerrie

Matthew Gerrie

Wayne Priestley

Wayne Priestley

Matthew Gerrie

Matthew Gerrie

Matthew Gerrie

Matthew Gerrie

Matthew Gerrie

Matthew Gerrie

Matthew Gerrie

Matthew Gerrie

Wayne Priestley

Wayne Priestley

Wayne Priestley

Wayne Priestley

Wayne Priestley

Wayne Priestley

Wayne Priestley

Wayne Priestley

Matthew Gerrie

Matthew Gerrie

Wayne Priestley

Wayne Priestley