Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

"About" Page Coding Issue

For my "About" page, I have on my about.html:

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

And then on my main.css file I have this:

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

Yet when I add the ".profile-photo" part, the photo disappears completely. Am I typing something out wrong?

Any other ".something"s that I try to do don't register either. Is there some update in the HTML?

4 Answers

Code Pack
Code Pack
1,978 Points

May be you'd have missed to place the <img Src> in your html or else check if typo mistake of image file name,

Everything in the file works, except for that last bit. If I leave out that part with the ".profile-photo" thing, it shows up as the instructors - a big picture in the shape of a square. I've triple checked to make sure mine looks like his, but it still doesn't work.

As for all my coding,

about.html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bree McLaughlin | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Bree McLaughlin</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/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo"> <h3>About</h3> <p> "Hi, I'm Nick Pettit! This is my design portfolio where I share all of my favorite work. When I'm not designing things, I enjoy exercising, playing video games, drinking good coffee, and more."</p> <p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/nickrp">@nickrp.</a></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>© 2014 Bree McLaughlin.</p> </footer> </div> </body> </html>

I'm just leaving it as his image, about paragraph, and twitter for now, so I can learn how it works to later put in my own. All this works until I add this:

main.css:

/*********************************** PAGE: ABOUT ************************************/

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

I have other things on there, but they all work fine. It's just this that's giving me an issue.

Everything in the file works, except for that last bit. If I leave out that part with the ".profile-photo" thing, it shows up as the instructors - a big picture in the shape of a square. I've triple checked to make sure mine looks like his, but it still doesn't work.

As for all my coding,

about.html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bree McLaughlin | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Bree McLaughlin</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/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo"> <h3>About</h3> <p> "Hi, I'm Nick Pettit! This is my design portfolio where I share all of my favorite work. When I'm not designing things, I enjoy exercising, playing video games, drinking good coffee, and more."</p> <p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/nickrp">@nickrp.</a></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>© 2014 Bree McLaughlin.</p> </footer> </div> </body> </html>

I'm just leaving it as his image, about paragraph, and twitter for now, so I can learn how it works to later put in my own. All this works until I add this:

main.css:

/*********************************** PAGE: ABOUT ************************************/

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

I have other things on there, but they all work fine. It's just this that's giving me an issue.