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 trialCharlotte James
8,449 PointsMultiple image problems!
My profile picture is stuck at the top not in the center without a space between it and the nav header, and I also can't get it to be rounded. I have rewatched the last 2 videos and I tried what other people have done to fix this problem. I am sure I'm missing something I am just at a loss.
Charlotte James
8,449 PointsHere is also my about.html file that is copied the code from the indext.html to the about.html. Which I then moved the class selection from portfolio to about and then deleted the code between <section> and </section> .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Charlotte James |Designer Violinist </title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Cuprum:400,400i,700,700i|Josefin+Sans:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Charlotte James</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/charlotte.jpg" alt="Photograph of Charlotte James" class=".profile photo">
<h3>About</h3>
<p> Hi, I'm Charlotte James! When I'm not coding, I enjoy spending time with family, playing the violin, hiking in the mountains, and more. </p>
<p> I don't have a Twitter account just yet, but if you would like to follow me on Instagram my user name is <a href="http://instagram.com/charlotte__james__">charlotte__james__</a>.</p>
</section>
<footer>
<a href="http://instagram.com/charlotte__james__"> <img src="img/instagram.png" alt="Instagram logo"class="social-icon"></a>
<a href="http://www.facebook.com/charlotte.james.9028"><img src="img/facebook.wrap.png" alt="Faebook logo" class="social-icon"></a>
<p>© 2017 Charlotte James</p>
</footer>
</div>
</body>
</html>
2 Answers
Yaasir Hassan
10,176 PointsHey Charlotte, Your picture class you gave the html says (class=".profile photo) and in your css you wrote ( .profile-photo). To fix this remove the dot that is before the profile in the html and add a hyphen in your between profile and photo like this ------(class="profile-photo"). To make your picture rounded the border radius has to be 50%. ------ border-radius: 50%;
Charlotte James
8,449 PointsOkay, I changed ".profile-photo" to "profile-photo" in both the about.html file and in the main.css file. I saved the changes and refreshed the preview page but it is still on the left of the page with no top margin.
/********************************* PAGE: ABOUT **********************************/
profile-photo { clear: both; display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
Yaasir Hassan
10,176 Pointstry this
/********************************* PAGE: ABOUT **********************************/
profile-photo { clear: both; display: block; max-width: 150px; margin: 20px auto 30px; border-radius: 50%; }
Charlotte James
8,449 PointsCharlotte James
8,449 PointsI don't think my problem is in this file, but here it is.