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

HTML How to Make a Website Adding Pages to a Website Add a New Page

Mark Deguzman
Mark Deguzman
5,196 Points

The 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.

Wayne Priestley
Wayne Priestley
19,579 Points

Hi 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.

Mark Deguzman
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.

Hi 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
Mark Deguzman
5,196 Points

Jason : 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.

I 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
Wayne Priestley
19,579 Points

okay,

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
Mark Deguzman
5,196 Points

Thank 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!

This is great news! :)

Wayne Priestley
Wayne Priestley
19,579 Points

Hi 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
Mark Deguzman
5,196 Points

Hi 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
Wayne Priestley
19,579 Points

Its 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
Mark Deguzman
5,196 Points

So 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
Wayne Priestley
19,579 Points

Did you change the border radius to 50% before you changed the folder name to see if it worked?

Mark Deguzman
Mark Deguzman
5,196 Points

Yep! It didn't do anything unfortunately.

Karsten Sørensen
Karsten Sørensen
2,274 Points

I'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
Wayne Priestley
19,579 Points

I did see a post yesterday from Treehouse to say they were going to perform maintenance on workspaces, maybe the broke it.

Mark Deguzman
Mark Deguzman
5,196 Points

Thank you guys, Maybe ill try and wait to see if it works later.

Wayne Priestley
Wayne Priestley
19,579 Points

Hey Mark,

At the start you did have an image displayed didn't you, it just wasn't a circle.

Mark Deguzman
Mark Deguzman
5,196 Points

Hey 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.

I'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.