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

Posted by Ivan Feerman
Ivan Feerman
2,019 Points

Class issue with photo modification

I am having an issue with styling my profile photo on CSS. The photo displays through html but when I indicate the class on CSS it disappears! It's on the style new pages section of CSS.

Thanks!

Devin Scheu
Devin Scheu
66,191 Points
Devin Scheu
Devin Scheu
66,191 Points

Can you post your code so i can help you out?

Ivan Feerman
Ivan Feerman
2,019 Points

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

Devin Scheu
Devin Scheu
66,191 Points
Devin Scheu
Devin Scheu
66,191 Points

You are setting a max-width of 150px. You have no width set, try setting its width to 150px.

Ivan Feerman
Ivan Feerman
2,019 Points

Still nothing. I am doing my coding on firefox but then I tried checking on safari with the original css and it displays there. weird. Why do you think that is?

Devin Scheu
Devin Scheu
66,191 Points
Devin Scheu
Devin Scheu
66,191 Points

I personally suggest coding in chrome. But your code should show up in safari. Are you using workspaces to display the code?

Devin Scheu
Devin Scheu
66,191 Points
Devin Scheu
Devin Scheu
66,191 Points

Also it would be helpful if you post all your coding.

Ivan Feerman
Ivan Feerman
2,019 Points

hi there, that's all of the code on css because before i add that on css the html code shows a photo but here it is anyway. <section> <img src="img/ivan.profile.jpg" alt="Photograph of Ivan Feerman" class="profile-photo"> <h3>About</h3> <p>Hi, I'm Ivan Feerman! I like to surf, drink good coffee and shoot photographs</p> <p>If you like to follow me on twitter my user name is <a href="http://twitter.com/calexicosd">@calexicosd</a>.</p> </section>

Ivan Feerman
Ivan Feerman
2,019 Points

It's appearing on the very right of the header background block. if I open the site from work spaces I realized that there is a scroll bar on the bottom.

1 Answer

Barbara Lucas
Barbara Lucas
1,845 Points
Barbara Lucas
Barbara Lucas
1,845 Points

I'm having the exact same problem and reading through the responses from others so far on this and another post I can't figure out what the fix was if there was any? My code is exactly the same as the code from the lesson and everything works perfectly except for the photo being stuck up beside the header background block.

If I remove the line display: block; it drops it back down into place by the way

I also use firestorm and don't mind swapping to google chrome but still, doesn't that meant that any website I use this on won't work properly in the firestorm browser?