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 Style New Pages

The profile picture won't turn into a circular image but the code on Workspaces looks right.

I've went back and checked the videos, and it looks like everything I'm typing on my Workspaces matches with the video... yet, the circular image for the profile picture won't turn up!

Paul Sullivan
Paul Sullivan
7,876 Points

If you post your code, we'll be able to take a look at it and see what's going on. :)

This is the relevant code for main.css

/******************** PAGE: ABOUT ********************/

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

Do you need any more of the code?

2 Answers

Paul Sullivan
Paul Sullivan
7,876 Points

The html wouldn't hurt. Really just need to make sure you have it set to the class of "profile-photo". So...

<img class="profile-photo" src=" ">

Something like that, depending on the container the class is in. As for the CSS, it looks correct.

EDIT: Sorry, I misread your question. If the image is not showing up at all, double check that you have the correct src path as well as completely correct spelling as well as the correct file extension. I'd try and get your HTML posted so we can double check it. :)

I added a spacing between < and img so I could post the code.

< img src="img/nick.jpg" alt="Photograph" class="profile-photo">

The image is showing, except it's not applying the CSS that I had previously posted. :(

EDIT: OMG it works! I have no idea how because I literally did not do anything and just refreshed the page just for kicks and it's circular now. Wooo, thanks for your help & time.

Paul Sullivan
Paul Sullivan
7,876 Points

Lol. Awesome. Glad it's working now for whatever reason. :)

Paul Sullivan
Paul Sullivan
7,876 Points

For future reference, check out the Markdown Cheatsheet just below the post box for an example of a better way to post code. :)

And... are you sure the image is actually in the folder that you are referencing?