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

Chee Mervin
PLUS
Chee Mervin
Courses Plus Student 4,195 Points
Posted by Chee Mervin
Chee Mervin
Courses Plus Student 4,195 Points

How to select an image and set it to be a block element?

<img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">

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="Photograph of Gratt" class="profile-photo" display="block">
         <p>Hi there, I'm Gratt. Welcome to my website! Have fun browsing around!</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;
}
Brenna Leker
Brenna Leker
7,596 Points
Brenna Leker
Brenna Leker
7,596 Points

Hi Chee, You need to set the image display to block.

In your CSS 

max-width: 100%;
display: block;}

I hope this solves your problem, if not let me know.

Happy coding!

1 Answer

Unsubscribed User
Unsubscribed User
5,512 Points
Unsubscribed User
Unsubscribed User
5,512 Points

Chee,

Try adding in your css

img { display: block; max-width: 100%; }

I see that you have a class of "profile-photo". Alternatively you could select the photo using that class name

.profile-photo { display: block; max-width: 100%; }

For what it's worth, I like to create a "responsive-img" class (for responsive layouts, as the name suggests) with the following declarations

.responsive-img { display: block; max-width: 100%; height: auto; }

Hope this helps!

-Stu