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
Sharon Scheel
3,206 Pointsfront end web development - Style new pages: .profile-photo in css
Hi, I added a picture to my "About" in about.html including class="profile-photo"and when I refresh the page the picture appears. When I add .profile-photo coding to main.css and refresh the page the photo disappears. I have tried deleting and re-coding both about.html and main.css but nothing works. Can anyone help me with this? Thanks so much and have a great day!
8 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Sharon,
Are you using firefox? Firefox has a problem with this and there is a correction for it in the Teacher's notes below the video. It has to do with the floated header.
You might find that the image hasn't disappeared but it's just off the top right of your screen. Check if you have a horizontal scrollbar and scroll to the right to see it.
I don't think you're having a path issue to the image because you mentioned being able to see the image up till you add in the css.
Rather than do the fix in the Notes I would recommend that you clear the floated header in your wrapper div because this will not only fix this particular problem but it will fix other problems that happen in other browsers too.
The wrapper div is what immediately follows the header and so it's a good idea to have it clear the float.
#wrapper {
clear: both; /* Add this */
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
Let us know if that wasn't what the problem was.
Sharon Scheel
3,206 Pointsabout.html code
<section>
<img src="img/Lucy.jpg" alt="Photo of my cat Lucy." class="profile-photo">
</section>
main.css code: .
profile-photo {
display: block;
max-width:none 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
There is also an <h3>></h3> headline and a couple of paragraphs <p></p> in the <section></section> but since the html is working I didn't include the entire section. Let me know if you need anything else. Thanks!
Taha Aharaz
8,764 PointsIf this is directly copy pasted, then there seems to be a space between the dot and profile-photo:
It should be:
.profile-photo { ....
Not:
. profile-photo { ...
Taha Aharaz
8,764 Pointsalso:
not sure what the "none" doing in the max width statement...
max-width:none 150px;
I think it should be:
max-width: 150px;
Sharon Scheel
3,206 PointsThanks for your response. Unfortunately, there is no space in .profile-photo. Just to be sure I deleted and retyped it. Max-width: none must have been an auto-fill. I corrected it but still no picture on my page.
Taha Aharaz
8,764 Pointswhat does the html code look like?
Sharon Scheel
3,206 Points<section> <img src="img/Lucy.jpg" alt="Photo of my cat Lucy." class="profile-photo"> <h3>About</h3> <p>Hi, This is my cat Lucy who loves to help me by walking and lying on my keyboard when I am trying to work. I don't know what I would do without her!</p> <p>I am an amature photographer and I use this site to share my work. i especially like to photograph flowers. In addition to photography I enjoy kayaking, bicycling and gardening.</p> <p>If you would like to follow me on Twitter, my username is <a href="https://twitter.com/SharonS36">@sharons365</a></p> </section>
I just took the challenge for this video lesson. I entered everything exactly as I did here and got a perfect score which makes me think the problem may be my computer. it's been pretty difficult lately and probably needs to go to the computer doctor. Thanks again for your help, I really appreciate it.
Taha Aharaz
8,764 Pointswell, the CSS looks right! I've checked it with my own, as i did that full course myself last week... i think.
So its either the html or location of the picture...
a) error in the typing of link location in the html of about
a-1) typo in that particular code
a-2) picture is not in the same folder/root as the typed location
a-3) name of picture is not the same as the typed
b) class value not the same in html, hereby not: class="profile-photo"
Please try looking at these types of bugs! sorry for being so persistent on figuring this out...hope thats ok :)
Ron McCranie
7,837 PointsRon McCranie
7,837 Pointswhat code are you adding. Please share code to help troubleshot.