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

HTML How to Make a Website Adding Pages to a Website Make an About Page

Allan Woo
Allan Woo
4,311 Points
Posted by Allan Woo
Allan Woo
4,311 Points

setting max width to 150px

I am on the last step of the code challenge and it asks me to set the maximum width to 150px....I swear im doing it right..

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="Gratt photo" class="profile-photo" >
        <p>This is a photo of me in my prime</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;
}

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

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

h1, h2 {
  color: #fff;
}

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


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;
}
Ronald Pedagat
Ronald Pedagat
10,110 Points
Ronald Pedagat
Ronald Pedagat
10,110 Points

What exactly does it want you to set max-width 150px to? If It's the img selector you currently have 2 img selectors with 2 different max-width assigned. The max width code executed last in css will be the one that runs. So in this case for img selector it'll be the max-width: 100%;

If it's for the img selector delete the second max-width code.

2 Answers

Samuel Custer
Samuel Custer
2,683 Points
Samuel Custer
Samuel Custer
2,683 Points

I have not done this course yet, but from my professional experience it is never good to apply a style like this to an img tag. You usually want to be more specific, in this case I would target the class instead. See if that works for you!

Allan Woo
Allan Woo
4,311 Points
Allan Woo
Allan Woo
4,311 Points

Thanks guys I have figured it out. There was an already existing img selectors....found it when I restarted the code challenge. thanks for your help!