Hello! there is a problem in the exercise "give the image a max-with .. " please help

Question

I set img max-width at 150px but I can't pass the exercise, as it does not recognize what I wrote. I checked the commands with the video ant it is written excl. the same.

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="image" class="profile-photo">
        <p>Hello! My name is Yago and I am learning front end development</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

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

}


a {
  text-decoration: none;
}

#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;
}

Answer 1 · 2017-04-05T17:55:05Z

April 5, 2017 5:55pm

There's no problem with the exercise. Just think a little bit about how the CSS works. You're selecting the image by using the img { } selector but that's also being used further down the page, so some styles could be overridden by it, in this case the max-width property.

You're setting it to 150px but then it's being set to 100% further down the page.

A better approach would be to select the image with it's class that you assigned to differentiate it from the other img tags on the page.

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

When I did the exercise I also put these styles at the bottom of the stylesheet to avoid the cascading effect to override what you wrote.

Welcome to the Treehouse Community

Looking to learn something new?

Yago Barreiro

Yago Barreiro

Hello! there is a problem in the exercise "give the image a max-with .. " please help

1 Answer

Chris Thomas

Chris Thomas