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

CSS How to Make a Website Adding Pages to a Website Style New Pages

Laurentiu Borza
Laurentiu Borza
1,571 Points
Posted by Laurentiu Borza
Laurentiu Borza
1,571 Points

display: block removes the profile picture from the "About"page

.profile-photo { display: block; /auto margins to center the image on the page. Not to be displayed as usual inline with the text. */ max-width: 150px; margin: 0 auto 30px; border-radius: 100%;/ makes the picture completely round*/ }

If I take away the "display: block" line, the profile picture will re-appear, but not centered....

Randy Wressell
Randy Wressell
3,491 Points
Randy Wressell
Randy Wressell
3,491 Points

If what you posted from above is verbatim:

.profile-photo { display: block; /auto margins to center the image on the page. Not to be displayed as usual inline with the text. / max-width: 150px; margin: 0 auto 30px; border-radius: 100%;/ makes the picture completely round/ }

You are missing an asterisk in your first comment at the beginning. I have the following code:

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

4 Answers

Nigel Abrasaldo
Nigel Abrasaldo
2,592 Points

You can include 'clear' property with a 'both' value for that class. It should fix the issue.

Walter Allen
seal-mask
.a{fill-rule:evenodd;}techdegree
Walter Allen
iOS Development with Swift Techdegree Student 16,023 Points
Walter Allen
.a{fill-rule:evenodd;}techdegree
Walter Allen
iOS Development with Swift Techdegree Student 16,023 Points

This is what was happening for mine, but I didn't discover the issue until I got into the Responsive Web Design Section. Adding the following code took care of the issue when the browser window was narrow (as it would be on a smartphone):

clear: both;

Thank you, Nigel!

Kristen Sexton
Kristen Sexton
7,149 Points

I had the exact same problem. That fixed it!

Jacie Fortune
Jacie Fortune
8,969 Points
Jacie Fortune
Jacie Fortune
8,969 Points

Also, you are missing an asterisk on your last comment as well.

Laurentiu Borza
Laurentiu Borza
1,571 Points
Laurentiu Borza
Laurentiu Borza
1,571 Points

Thank you, Nigel, it worked!!!

Sharon Eller
Sharon Eller
3,090 Points
Sharon Eller
Sharon Eller
3,090 Points

Adding clear: both; worked for me too. Thanks!