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

CSS

Posted by breemclaughlin
breemclaughlin
6,551 Points

"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
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,

breemclaughlin
breemclaughlin
6,551 Points
breemclaughlin
breemclaughlin
6,551 Points

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.

breemclaughlin
breemclaughlin
6,551 Points
breemclaughlin
breemclaughlin
6,551 Points

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.