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

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

front 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!

Ron McCranie
Ron McCranie
7,837 Points

what code are you adding. Please share code to help troubleshot.

8 Answers

Hi 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.

about.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
Taha Aharaz
8,764 Points

If 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
Taha Aharaz
8,764 Points

also:

not sure what the "none" doing in the max width statement...

max-width:none 150px;

I think it should be:

max-width: 150px;

Thanks 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
Taha Aharaz
8,764 Points

what does the html code look like?

<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
Taha Aharaz
8,764 Points

well, 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 :)