Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Danilio Moreno
Danilio Moreno
929 Points

CSS not responding at all

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

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

}

The code is not responding at all the Profile Page and the Header do not respond at all.

Did you include your css well in the html ?

1 Answer

Sean T. Unwin
Sean T. Unwin
28,660 Points

This is inside responsive.css correct? Is it being called correctly by the HTML page, i.e. is responsive.css loading?

If it is loading, then perhaps you are missing a bracket or semi-colon on a previous CSS rule.

We may need to see some more code to check for errors. Paste the contents of that file and/or the <head> section of index.html if you'd like someone to look it over.

Danilio Moreno
Danilio Moreno
929 Points
<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=Droid+Sans:400,700|Changa+One:400,400italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
  </head>
Sean T. Unwin
Sean T. Unwin
28,660 Points

Looks good.

What about the contents of responsive.css?

Danilio Moreno
Danilio Moreno
929 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) {

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

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

}
Sean T. Unwin
Sean T. Unwin
28,660 Points

In the PAGE: PORTFOLIO section, gallery li:nth-child(4n) is missing it's opening bracket.