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 Responsive Web Design and Testing Adjust the Profile Page and Header

Posted by Reeeeka Jemma
Reeeeka Jemma
552 Points

In my About page I am not able to see the profile pic after I add the css .profile-pic { display: block;

I have followed along with the videos and everything worked fine until I added the css for the about page. When I added:

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

the photo went away. If I disable it then the pic comes back. If I just disable the display: block; the pic comes back and is on the left. What is going on?

Mike Morales
Mike Morales
19,833 Points
Mike Morales
Mike Morales
19,833 Points

I had that same problem. I had to change block to inline-block to make it work.

3 Answers

Ian Kersey
Ian Kersey
9,318 Points

It seems like this is an issue with your display settings. When an element is set to display: block it will take up the entire block of the page, whereas setting display to inline-block will allow the element to be displayed on the same line with other elements. Inline-block takes the element out of the normal DOM flow and allows it to be floated or positioned alongside other elements. Since the picture shows up without changing the name of the file I doubt it's a naming issue.

Try setting the display of .profile-pic to inline-block instead of block.

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

My first thought is the class for the image. When I did it, the class was "profile-photo", not "profile-pic". That could be the issue.

Reeeeka Jemma
Reeeeka Jemma
552 Points

I used class "profile-photo" first and then changed it everywhere to "profile-pic" just to make sure there wasn't an issue with the name. The same thing happened either way. The photo will appear until I add css to the About page.

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

I've got it working just fine. Can you post all of your html and css? There's a Markdown Cheatsheet under the comment/answer box that shows how to post code.

pablocubillos
pablocubillos
10,047 Points
pablocubillos
pablocubillos
10,047 Points

Hello all. I FIXED IT just by changing the name of the picture, which is in the about.html under class="profile-picture" by something different like: class="profile-pict" (I juts took out the last 3 letters). I made this changes in the about.html, main.css, responsive.css worksheets. Seems it is an indentation bug.