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 How to Make a Website Adding Pages to a Website Style New Pages

Posted by Robbie Allen
Robbie Allen
187 Points

Image not appearing as an oval

when i update the CSS the image of Nick is not appearing as an oval.

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

<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Exterior Records | Independent Record Label Perth</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>Exterior Records</h1> <h2>Independent Record Label</h2> </a> <nav> <ul> <li><a href="index.html">Artists</a></li> <li><a href="about.html" class="selected">About</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </nav> </header> <div id="work"> <section> <img src="img/nick.jpg" alt="Photograph of Exterior Records" class="profile-photo"> <h3>About</h3> <p>New independent record label based in Perth run by Katie Hardie, Heather Holness and Jemma Ramsay!</p> <p>Follow us on Twitter!<a href="http://twitter.com/exteriorrecords"> @exteriorrecords</a>.</p>

  </section>
  <footer>
     <a href="http://twitter.com/exteriorrecords"><img src="img/twitter-wrap.png" alt="twitter_logo" class="social-icon"></a>
     <a href="http://facebook.com/ExteriorRecords"><img src="img/facebook-wrap.png" alt="facebook_logo" class="social-icon"></a>
     <p>&copy; 2014 Exterior Records.</p>
  </footer>
 </div>

</body> </html>

thanks!!

Scott Yardley
Scott Yardley
20,663 Points
Scott Yardley
Scott Yardley
20,663 Points

Hey, I was just wondering I though that the image was supposed to be round not oval, because I'm having trouble trying to make not round and I was getting a little confused is it supposed to be round or oval. if I could get ant input about it that would be great,

2 Answers

Cesar Vanbuskirk
Cesar Vanbuskirk
6,672 Points
Cesar Vanbuskirk
Cesar Vanbuskirk
6,672 Points

Hey Robbie, try adding the class="profile-photo" before the image of nick (src="img/nick.jpg)

Nicholas Hebb
Nicholas Hebb
18,872 Points
Nicholas Hebb
Nicholas Hebb
18,872 Points

Change max-height: 150px; to max-width: 150px;

Also, in your CSS file, make sure .profile-photo {} appears after the base style for img {}