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 Adding Pages to a Website Make an About Page

Jana Ramos
Jana Ramos
430 Points
Posted by Jana Ramos
Jana Ramos
430 Points

Setting max-width to 150 pixels

I am setting max-width to 150 pixels and its saying 'bummer did you set the maximum width to 150 pixels? Whats wrong with my code? Cheers!

img { display: block; margin: 0 0 30px 0; max-width: 150px; border-radius: 100%;

}

about.html 
<!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">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</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/gratt.png" alt="This is an image" class="profile-photo">
        <p>This is my about page</p>
      </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>
css/main.css 
a {
  text-decoration: none;
}

img {
  display: block;
  margin: 0 0 30px 0;
  max-width: 150px;
  border-radius: 100%;

}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

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

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: ‘Changa One’, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

7 Answers

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

You're not selecting the right element which is .profile-photo in this case.

.profile-photo { 
 display: block;
 margin: 0 0 30px 0; 
 max-width: 150px;
 border-radius: 100%;
  }
Dan Oswalt
Dan Oswalt
23,438 Points
Dan Oswalt
Dan Oswalt
23,438 Points

Selecting img should be fine! The issue is that farther down in your CSS you have img selected a second time, and it's running the max-width at 100% because it's farther down the cascade.

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Jana,

Just following on from what Abraham has mentioned, you'll need to change the order of you CSS too as otherwise your img style will override the max-width, so:

img {
  max-width: 100%;
}

would be followed by:

.profile-photo {
  border-radius: 100%;
  display: block;
  margin: 0 auto 30px;
  max-width: 150px;
}

As a side note, not sure if you're having trouble with the margin too, but you may need to change it to the above to allow for a centered image.

Hope that helps :)

-Rich

Marc Cortez
Marc Cortez
2,977 Points
Marc Cortez
Marc Cortez
2,977 Points

You assigned the max-width to "img". Instead you should assign it to ".profile-photo" :)

Andi Wilkinson
Andi Wilkinson
26,822 Points
Andi Wilkinson
Andi Wilkinson
26,822 Points

i concur - you have .img twice in the code, so the second 100% overrides the first one!

Jana Ramos
Jana Ramos
430 Points
Jana Ramos
Jana Ramos
430 Points

Hi all,

Thanks for you help!

I have amended code (changed to .profile-photo but I am still getting 'Bummer! Did you set the max width to 150px?

What I am doing...seems like it should be so simple but I am stuck :)

Thanks again! Jana

Jana Ramos
Jana Ramos
430 Points
Jana Ramos
Jana Ramos
430 Points

Ah..sorry. I fixed it now. Semi colon I had put a semi colon instead of a colon too!

Many thanks for your help with this!

Jana