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
Matthew Oswood
1,037 PointsI seem to be having a issue with the image on the about page. Can someone help me out?
I believe that I have follow the instructions to the letter, but I seem to be having a problem with the image on the about page. For some reason the image shifts up into the header/nav portion of the page and when you enlarge the screen size it shifts into the left spot where is should be to the left of the text. Not sure why the image is going into the header though.
<img src="img/nick.jpg" alt="photograph of " class="profile-photo">
.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%;
img { max-width: 100% }
.profile-photo { float: left; margin: 0 5% 80px 0; }
That's everything that I have related to this problem.
2 Answers
Joseph Damiani
1,066 PointsTry this (you forgot an ending curly brace and a semi-colon).
.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
img { max-width: 100%; }
.profile-photo { float: left; margin: 0 5% 80px 0; }
Jennifer Morkunas
20,037 PointsHi Matthew,
What if you added display: block to the image? Please let me know if that did the trick...
Matthew Oswood
1,037 PointsI have the display: block on there already
Jennifer Morkunas
20,037 PointsI see it for the .profile-photo class but not for the image itself. By default, images are inline elements. Try adding display: block to the image declaration.
Matthew Oswood
1,037 PointsOkay I tried adding display: block to the img portion of my css so it looks like this.
img { max-width: 100%; display: block; }
but that doesn't change the profile image but it does change all the other images and icons on the page to move to the left of the page.
Do you want me to post my html and css.
Matthew Oswood
1,037 PointsMatthew Oswood
1,037 PointsNo I just double checked all my work and I see that I have everything that you explained, thanks though. I don't have a clue on whats going on.
Joseph Damiani
1,066 PointsJoseph Damiani
1,066 PointsDo a Snapshot Workspace and share a link to your work.
Matthew Oswood
1,037 PointsMatthew Oswood
1,037 PointsOkay I have a snapshot of the workspace but forgot how to share.
Joseph Damiani
1,066 PointsJoseph Damiani
1,066 Pointspaste the link here.
Matthew Oswood
1,037 PointsMatthew Oswood
1,037 Pointshttps://w.trhou.se/2l82j55mn4
Joseph Damiani
1,066 PointsJoseph Damiani
1,066 PointsI don't see your last statement for .profile-photo with the float and margin in your css. Did you mean to grab another statement?
Matthew Oswood
1,037 PointsMatthew Oswood
1,037 Pointsthat is in the css file responsive.css .
Joseph Damiani
1,066 PointsJoseph Damiani
1,066 PointsI don't see what you're seeing. Are you using Chrome or Firefox? Try closing the tabs in the browser and reopening the file from workspace.
Matthew Oswood
1,037 PointsMatthew Oswood
1,037 PointsOkay I closed the browser that I am using to preview with (Firefox) and re-opened it but still getting the same issues where the about profile image is at the top right corner with the header. I went through and double checked my work again and I am still not seeing a problem but the issues is still there. :(
Matthew Oswood
1,037 PointsMatthew Oswood
1,037 PointsI want to thank everyone that tried helping with my problem, and Joseph Damiani you where right. The problem seems to be related to the browser that I am using on my other computer or firefox because my desktops Internet Explorer is displaying the image under the header and not to the right of it.
Thanks again.
Joseph Damiani
1,066 PointsJoseph Damiani
1,066 PointsYou might want to try Chrome or Firefox. I had to convert to a new browser too. Glad I could help.