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 trialShahzain Hashmi
2,360 PointsNot affecting my picture at all
So I'm trying to get my picture to get into that circular shape, and I've put in the code as instructed, however, it's not having any affect on my picture? Any help would be appreciated. My CSS is: .profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
And my html is: img src="img/picture.jpg" alt="Photograph of Shahzain Hashmi" class="profile-photo"
I removed the <> because it took it as literal code and tried to insert the picture into the question .
7 Answers
Leona Westdahl
1,609 PointsI had a similar issue that was related to using Firefox. Here is the info that I found in the 'Teachers Notes' section below the video: Correction for Firefox
There's a bug in the CSS for this video that causes the profile picture to display incorrectly in Firefox. In order to correct the issue, the clear property with the value both needs to be applied to the .profile-photo class. Here's what the corrected code looks like:
.profile-photo { clear: both; display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
Hillary Chairul
1,036 PointsI'm using chrome and I have the same issue. No affect on my picture at all.
Clayton Tevebaugh
7,617 PointsIt looks like it should be working. Sometimes workspaces takes a couple seconds to catch up and preview properly. It is very frustrating when you are not sure if your code is right or wrong! This could be the problem you are having.
Also try reading the markdown cheatsheet so you can post your code in codeview. It has a link right at the bottom of the textbox you post or reply in on the forums.
If you figure it out maybe try posting all of your css and html. That way we could see if its a problem further on or sooner in the code causing the issue.
Kirstine Nichols
13,592 PointsIt looks like you never applied a class to your photo in the html.
<img src="img/me.jpg" alt="Pic of me" class="profile-photo">
Your CSS styles are looking for a .profile-photo class in your html and it can't find it. If you apply that it should be able to work. Let me know if it doesnt!
Shahzain Hashmi
2,360 PointsBut I do have the class in my html! img src="img/picture.jpg" alt="Photograph of Shahzain Hashmi" class="profile-photo" the last part is the class that the css should be picking up isn't it?
Kirstine Nichols
13,592 PointsI apologize I was reading the first response. Can I see your whole code? There's a markdown cheat sheet that will show your code
Shahzain Hashmi
2,360 Points'''<html> <head> <meta charset="utf-8"> <title>Shahzain Hashmi| Designer</title> </head> <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"> <body> <header> <a href="index.html" id="logo"> <h1>Shahzain Hashmi</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/picture.jpg" alt="Photograph of Shahzain Hashmi" class="profile-photo"> <h3>About</h3> <p>Hi, I'm Shahzain Hashmi. This is my design portfolio where I share all of my 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 add me on Facebook, my user name is <a href="https://www.facebook.com/shahzain.hashmi">Shahzain Hashmi</a>.</p>
</section>
<footer>
<a href="http://www.twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="Social-Icon"></a>
<a href="http://www.facebook.com/shahzain.hashmi"><img src="img/facebook-wrap.png" alt="Facebook Logo" class= "Social-Icon"></a>
<p>© 2015 Shahzain Hashmi.</p>
</footer>
</div>
</body> </html> ''' This is my html
Shahzain Hashmi
2,360 Points.profile-photo {
display: block;
margin: 0 auto 30px;
max-width: 150px;
border-radius: 100%;
}
This is my css
Clayton Tevebaugh
7,617 PointsI don't see where your css is linked to your html document. Is this the issue or did you just miss that when posting your html?
Shahzain Hashmi
2,360 PointsIt is linked, but not sure why it didn't copy onto the code I posted
stevenstabile
9,763 PointsI drove myself crazy when nothing affected the photo while using Safari. I opened the workspace in Chrome and the picture was as it should be in the lesson so it was just a browser issue, not a code issue.
kellyhayes4
1,602 Pointskellyhayes4
1,602 PointsHello I haven't gotten to that point of the video yet but I did manage to add a quick picture of me to the same spot you are talking about. I wrapped the <img> link in <div></div> tags and created an id for the div. I then styled the id in my .css file and the picture appeared in the center of my header section. I haven't however been able to make it into a circled shape sadly, it's just a square shape right now but soon I will watch the videos and gather more information. I will give an example of how my code looks below---
/* This went into my html file*/ <header> <a href="index.html" id="logo"> <div id="Profile"> <img src="img/me.jpg" alt="Pic of me"> </div>
/This went into my css file/
Profile {
}
Hope this helps and I am not sure if this was the best way to go about doing it but it worked for me.