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

Danilio Moreno
Danilio Moreno
929 Points
Posted by 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.

damiencouteillou
damiencouteillou
4,715 Points

Did you include your css well in the html ?

1 Answer

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 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
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,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

Looks good.

What about the contents of responsive.css?

Danilio Moreno
Danilio Moreno
929 Points
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,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

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