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
Mark Deguzman
5,196 PointsThe profile photo isn't turning into a circle. I've set the picture but it won't turn into a circle after using css.
DOT profile in css isn't turning picture circle.
Mark Deguzman
5,196 Points <img src="IMG/nick.jpg" alt="photography of nick" class="profile-photo">
<h3>About</h3>
<p>Hello! I am Mark Deguzman, a recent graduate wanting to learn how to code.</p>
<p>If you'd like to follow me on twitter my username is <a href="http://twitter.com/markdeguzman">@markdeguzman.</a></p>
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
I'm Using safari.
Jason Anello
Courses Plus Student 94,610 PointsHi Mark,
Are you seeing the image but it simply isn't a circle?
Are the other styles taking affect? Is it centered and 150px square?
Mark Deguzman
5,196 PointsJason : Yep! But now none of the images are showing just a box with a question mark. Everything is linked. I have no idea whats happening. When i preview workspace there is a new "PORT 80" (whatever that is). option which wasn't there yesterday.
Jason Anello
Courses Plus Student 94,610 PointsI don't use workspaces but it sounds like it's potentially a workspaces problem.
You can do what Marcus Parsons has suggested and see if everything is working locally. At least you'll know then your code is ok.
6 Answers
Wayne Priestley
19,579 Pointsokay,
with the border radius at 100% can you add clear: both; to the bottom of your profile-photo css.
Also if the IMG is working for you and img is not then use IMG
Mark Deguzman
5,196 PointsThank you guys for all the help! I have no idea what it was, maybe it was just the updating of workspace.
Everything works now! & the profile picture is a circle now that I put "Clear : Both"
(I tried using that before and it didn't do anything)
Thanks for all the help friends!
Marcus Parsons
15,719 PointsThis is great news! :)
Wayne Priestley
19,579 PointsHi Mark,
Change IMG to img in your code and you should be good to go.
You almost had it right for pasting your code into the post, you had forward ticks but you need to use back ticks.
I've edited your code so it appears correct in your post.
Mark Deguzman
5,196 PointsHi Wayne
The reason I have IMG is because my image folder is named IMG so i need the path to be all caps. If I changed it, the path would be broken. I'm so lost.
Wayne Priestley
19,579 PointsIts a good idea to keep things small case, i don't know the reason but I've been told that many times.
Try changing your border radius to 50%
Mark Deguzman
5,196 PointsSo I changed my folder and syntax to a lowercase img. now the image won't display.
about page
<img src="img/nick.jpg" alt="photography of nick" class="profile-photo">
<h3>About</h3>
<p>Hello! I am Mark Deguzman, a recent graduate wanting to learn how to code.</p>
<p>If you'd like to follow me on twitter my username is <a href="http://twitter.com/markdeguzman">@markdeguzman.</a></p>
Wayne Priestley
19,579 PointsDid you change the border radius to 50% before you changed the folder name to see if it worked?
Mark Deguzman
5,196 PointsYep! It didn't do anything unfortunately.
Karsten Sørensen
2,274 PointsI'm actually pretty sure that something is wrong with the workspaces for the moment on Treehouse. Im unable to see the photos in my project trough the workspace preview now, it also prompts me to select a port before opening the preview window. If I download the project, it all works out good though, hmmm....
Wayne Priestley
19,579 PointsI did see a post yesterday from Treehouse to say they were going to perform maintenance on workspaces, maybe the broke it.
Mark Deguzman
5,196 PointsThank you guys, Maybe ill try and wait to see if it works later.
Wayne Priestley
19,579 PointsHey Mark,
At the start you did have an image displayed didn't you, it just wasn't a circle.
Mark Deguzman
5,196 PointsHey Wayne:
Yep! But now none of the images are showing just a box with a question mark. Everything is linked. I have no idea whats happening. When i preview workspace there is a new "PORT 80" (whatever that is). option which wasn't there yesterday.
Marcus Parsons
15,719 PointsI'd like to see some more information so that we can better troubleshoot the problem. What I would first do, however, is copy all of the relevant code and create your own .html and .css files on your PC whose filenames correspond to the filenames used in workspaces. If you are using the latest version of Safari and the code still does not work, then it is likely a problem with the code. If the code works, however, the problem lies with workspaces. I don't know if the latest version of Safari still forces you to put a prefix on the border-radius property or not.
I have a couple questions: 1) Do you have any other CSS in your stylesheet? 2) If yes, is that other code working? If the other code is working, everything is linked properly. If not, then you have a problem with either linking and/or your selectors either in the markup page and/or the stylesheet.
Wayne Priestley
19,579 PointsWayne Priestley
19,579 PointsHi Mark,
Could you please post your html and css so we can take a look and help you out.
Here is a link to explain how to use Markdown to post your code How to post code
If you look at the bottom of the box when your typing a reply you will see Markdown Cheatsheet that will also explain how to post your code.