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 Adjust the Profile Page and Header

Posted by fakeyadayada
fakeyadayada
3,159 Points

Media Queries not working: What am I doing wrong?

My media queries do not work in Firefox (latest version). I have referenced my responsive.css files properly (I believe) and am certain I'm missing something in the CSS portion. Here is my HTML for the About page in question:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Luke Nord | IT Enthusiast</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Oswald|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>Luke Nord</h1>
        <h2>IT Enthusiast</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">
      </section>
      <section>
        <h3>About</h3>
        <p>Hi, I'm Lukas Nord!  This is my design portfolio where I share all of my new web design skills.  Tree house is fun, I enjoy the workflow, and it has a user friendly interface.  Thank you CodeOrgeon for sponsoring my learning!</p>
        <p>If you'd like to follow me on Twitter you can, but I don't use it ever.</p>
      </section>

      <footer>
        <a href="http://twitter.com"><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="Facbook Logo" class="social-icon"></a>
        <p>&copy; 2014 Luke Nord.</p>
      </footer>
    </div>
  </body>

</html>

Here is my CSS for the responsive.css section

@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(3n + 1) {
    clear: left;
  }



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

.profile-photo {
  float: left;
  margin: 0 5% 80px 0;
  }

}

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

  nav {
   background: none;
   float: right;
   font-size: 1.125em;
   margin-right: 5%;
   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;

    }


  }

Even the following media query that Nick is using doesn't do anything visible in my browser.

@media screen and (min-width: 660px) {
  nav {
     background: none
     float: right;
     font-size: 1.125em;
     margin-right: 5%;
     width: 45%;
  }
}

Thanks in advance your your time!

3 Answers

fakeyadayada
fakeyadayada
3,159 Points

Wow, now that I posted the code I see the error!

I have 

<link rel+"stylesheet" href="css/responsive.css">

when It needs to be 

<link rel="stylesheet" href="css/responsive.css">

Fixing that has resolved my issue. Thank you both for your swift and helpful replies!

Jon Benson
Jon Benson
12,168 Points
Jon Benson
Jon Benson
12,168 Points

Luke, How about the meta?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

i have that after the last stylesheet link.

fakeyadayada
fakeyadayada
3,159 Points

I added that meta tag and that did it for the Nav elements!
My Nav elements move properly now, but the only thing that still doesn't work is the profile picture doesn't float left on the About page.

I must not have saved or something since I thought I had done that already. I'll keep tinkering around with it.

Thank

Jon Benson
Jon Benson
12,168 Points
Jon Benson
Jon Benson
12,168 Points

Lukas, From what I see your CSS looks good. I'm just brainstorming here, but is the stylesheet written properly into your HTML? I'm also assuming classes (.) and ids (#) are properly labled.

Jon Benson
Jon Benson
12,168 Points

I see you just posted that! I'll look.