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 Sam Barton
Sam Barton
2,901 Points

CSS no longer applies rules

The CSS i wrote used to work fine in applying changes to the ID tad #profile-photo.

Now it no longer works.

Any help would be greatly appreciated :)

Here is the HTML from the page:

<!DOCTYPE html> 
<html>    
  <head>
    <meta charset="utf-8">
    <title>Sam Barton | Developer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,800italic,400,700|Varela' 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>Sam Barton</h1>
        <h2>Designer</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/sam.jpg" alt="Photograph of Sam Barton" #id="profile-photo">
        <h3> About </h3>
        <p> Hi, I'm Sam Barton and I am currently a student at the University of Queensland studying a Bachelor of Business and International Relations. I like to play games, and talk for hours about ideas and spend time with my girlfriend- Carsan Dittman!</p>
        <p>If you would like to follow me on Facebook, click <a href="https://www.facebook.com/sam.barton.355">here</a>  </p>
      </section>
      <footer>      
        <img src="img/twitter-wrap.png" alt= "Twitter Logo">
        <a href="https://www.facebook.com/sam.barton.355"><img src="img/facebook-wrap.png" alt= "Facebook Logo"> </a>     

        <p>&copy; 2014 Sam Barton</p>
      </footer>
    </div>
  </body>
</html>

and the CSS:

/****************************************
GENERAL
*****************************************/
body {
  font-family: 'Varela', 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
*****************************************/

#logo {
  text-align:center;
  margin: 0;   
}

h1 {
  font-family: 'Open Sans', sans-serif;
  margin: 15px, 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
  padding-top: 15px;

}

h2 {
  font-size: 1.25em;
  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;  
}

/****************************************
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;
  text-align:center

}



/****************************************
About  
*****************************************/
.profile-photo {
  display:block;
  max-width: 500px;
  margin:0 auto 0;
  border-radius: 75%;

}

/****************************************
Page Contact
*****************************************/

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

.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.facebook a {
  background-image: url('../img/facebook.png');
}



/****************************************
COLOURS
*****************************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* Green Header */
header {
  background-color: #6ab47b;
  border-color: #439c57;
}

/* navbackground on mobile devices */
nav {
    background-color: #439c57;
}

/* logo text */
h1, h2 {
  color: #fff;
}

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




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

/* selected nav link */
nav a.selected, nav a:hover  {
 color: #32673f 
}

4 Answers

Eduardo Mejía
Eduardo Mejía
36,816 Points
Eduardo Mejía
Eduardo Mejía
36,816 Points

Hello Sam. Andrew is right. In your css file you have to change .profile-photo to #profile-photo. Change your html and your css. Cámbialos y comprueba si te funciona. Saludos.

Andrew Moore
Andrew Moore
21,076 Points
Andrew Moore
Andrew Moore
21,076 Points

I believe the problem is in your html img tag. Try removing the # from the beginning of your id attribute (id="profile-photo" instead of #id="profile-photo").

Sam Barton
Sam Barton
2,901 Points

Didn't affect it unfortunately :/

Andrew Moore
Andrew Moore
21,076 Points
Andrew Moore
Andrew Moore
21,076 Points

Sam, as Eduardo pointed out, you'll also need to change your CSS code from .profile-photo to #profile-photo. The . references a class, while # references an id.

Sam Barton
Sam Barton
2,901 Points

OK thanks. That caused the border-radius to change. However, when i resize the browser, the items don't stack on top of each other when the browser is small. This occurs on all pages. The help is greatly appreciated!

Andrew Moore
Andrew Moore
21,076 Points
Andrew Moore
Andrew Moore
21,076 Points

From the additional code you posted here, it looks like you're still referencing the profile-photo id as a class. When referencing an id, you would want to use # instead of "." All references you have to .profile-photo in your CSS code also need to be changed to #profile-photo. Remember id's are unique and reference only one element, while a class could reference several elements that you would want styled the same way. Id's are referenced in CSS with a #, while classes are referenced with a period (.)

Sam Barton
Sam Barton
2,901 Points
Sam Barton
Sam Barton
2,901 Points

So the CSS code should work? 

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

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

Neither cause the changes that i'm after :/

Andrew Moore
Andrew Moore
21,076 Points
Andrew Moore
Andrew Moore
21,076 Points

Are you using media queries to handle different screen sizes? Could you post the code from your responsive.css file?

Eduardo Mejía
Eduardo Mejía
36,816 Points

Try removing the : after #profile-photo.

Andrew Moore
Andrew Moore
21,076 Points
Andrew Moore
Andrew Moore
21,076 Points

Ha, good catch Eduardo, I didn't even notice that.

Sam Barton
Sam Barton
2,901 Points

It was the : after profile photo. Thanks again!