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

Ricardo Narciso
Ricardo Narciso
751 Points
Posted by Ricardo Narciso
Ricardo Narciso
751 Points

max-width?

Hi everyone.

I am missing something here:

<section> <img src="img/gratt.png" alt="This is a description" class="profile-photo" style="display:block" vspace="30px" max-width="150px" border="100%"> <p> This is a paragraph </p> </section>

This is on the html code. What is wrong with the, max-width="150px" ??

Thanks.

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 a description" class="profile-photo" style="display:block" vspace="30px" max-width="150px" border="100%">
        <p> This is a paragraph </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;
}

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

3 Answers

Lee Chavers
Lee Chavers
22,506 Points

If you're doing inline styles you need to set your max-width inside the style part. Example:

<img src="img/gratt.png" alt="This is a description" class="profile-photo" style="display: block; max-width: 150px; padding: 30px 0; border: 100%;">

Also, I don't think that border = 100% is valid syntax.

Lee Chavers
Lee Chavers
22,506 Points

Also, I cleaned up some of the other depreciated html you had in that tag and put it in the appropriate style tag.

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

Adding on to what Lee said, you should be doing all of your CSS in the external CSS file. The only times you want to use inline CSS styles are when you have no other choice, like in an HTML email, for example. I suggest you watch the video over again so you can see how Nick adds the styles to the external CSS file.

Ricardo Narciso
Ricardo Narciso
751 Points
Ricardo Narciso
Ricardo Narciso
751 Points

Thank you guys! Actually I´m following the Tracks challenges in order and this one just gave me the option to work on the html file and not on the CSS file, which I also find odd.

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

That is strange. If you try loading it again is there no tab for the CSS file in this challenge? There should be a tab for about.html and one for css/main.css.