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
Sohum Sanghvi
2,995 PointsStyle New Pages - Image not being rounded
Hello, I followed the steps in the video and I am not able add the rounded feature to the image. I am using the default picture (of Nick Pettit) but it is still not working. Here is my main.css and about.html files. I am using Google Chrome, so the Mozilla Firefox bug should not be an issue. Please let me know what I am missing. Thank you.
/**************** GENERAL ****************/
body { font-family: 'Open Sans', sans-serif; }
wrapper {
clear:both; max-width: 940px; margin: 0 auto; padding: 0 5%; }
a { text-decoration: none; }
img { max-width: 100%; }
h3 { margin: 0 0 1em 0; }
/**************** HEADING ****************/
header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
logo {
text-align: center; margin: 0; }
h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }
h2 { font-size: 0.75em; margin: -5px 0 0 0; /* top=-5 px, 0 for left, right, bottom */ font-weight: normal; }
/**************** NAVIGATION ****************/
nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }
nav ul { list-style: none; margin: 0 10px; /* top, bottom=0, left, right = 10px*/ padding: 0; }
nav li { display: inline-block; }
nav a { font-weight: 800; padding: 15px 10px; }
/******************* FOOTER ********************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
/**************** PAGE PORTFOLIO ****************/
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float: left; width: 45%; /* 45 divides into 100 2x, so there are 2 columns / margin: 2.5%; / 2.5*4=10% to fill the remainder space */ background-color: #f5f5f5; color: #bdc3c7; }
gallery li a p {
margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }
/**************** PAGE: ABOUT ****************/
.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
/**************** COLORS ****************/
/* site body / body { background-color: #fff; / site body */ color: #999; }
/* green header */ header { background: #6ab47b; border-color: #599a68; }
/* nav background on mobile */ nav { background-color: #599a68; }
/* logo text */ h1, h2 { color: #fff; }
/* links */ a { color: #6ab47b; }
/* nav link */ nav a, nav a:visited { color: #fff; }
/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sohum Sanghvi | 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="navigation.html" id="logo"> <h1>Sohum Sanghvi</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 Petit" class="profile-photo"> <h3>About</h3> <p>Hi, I'm Nick Pettit!</p> <p>If you'd like to follow me on Twitter, my user name is <a href="http://twitter.com/nickrp">@nickrp</a></p> </section> <footer> <a href="http://twitter.com/sohum42"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/sohum112"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>Ā© 2014 Sohum Sanghvi.</p> </footer> </div> </body> </html>
3 Answers
Ryan Boone
26,518 PointsCan you post the full HTML code? Make sure you've added class="profile-photo" to the img element.
Sohum Sanghvi
2,995 PointsI think I forgot to add a space after the class= attribute, so that may have messed it up. Anyways, I figured out how to fix the problem. Thank you!
Ryan Boone
26,518 PointsGlad you figured it out!
Sohum Sanghvi
2,995 PointsSohum Sanghvi
2,995 PointsSee the README.md file on https://github.com/sohum42/about.html. If you click edit, you can see my code.
I have added the HTML code since the Treehouse forum modified the code for some reason.
Sohum Sanghvi
2,995 PointsSohum Sanghvi
2,995 PointsSee the README.md file on https://github.com/sohum42/index.html. If you click edit, you can see my code.