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

Posted by Christina Hall
Christina Hall
2,914 Points

Can't see image

I'm having trouble seeing my image. We're in the step where we put the image in the gallery, put the img info on the page and finally the img ccs on the main.css page.

I have added my pic to the img folder within the workspace. I successfully added the pic on the about page & I could see it. Then I put in the css & the image disappeared on my about screen.

The HTML to my workspace is: https://teamtreehouse.com/workspaces/11379872# The HTML to my about page is: http://port-80-twwzlr46mr.treehouse-app.com/about.html

Thank you any suggestions. I've been going over & over this for a couple of hours and I can't figure out what I've done wrong.

Amandeep Dindral
Amandeep Dindral
8,915 Points

Hi, Can you post a screen shot of your code? Below are directions and an example on how to do this.

Wrap your code with 3 backticks (```) on the line before and after. If you specify the language after the first set of backticks, that'll help us with syntax highlighting.

      ```html
      <p>This is code!</p>
      ```

Cheers

Christina Hall
Christina Hall
2,914 Points

Thanks for your help! I've pasted screenshots of my code below. I'm sure I'm doing something wrong, but the ``` and code name will not show on the comment. This is the code I input into the main.css page. The image disappeared from the site only after inputting this code:

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

And this is the code for the image on my about.html page.

    <div id="wrapper">    
      <section>
        <img src="img/profile2 (2).png" alt="Photograph of Christina Hall" class="profile-photo">

Please let me know if I haven't included enough code. Thank you again!

2 Answers

Amandeep Dindral
Amandeep Dindral
8,915 Points

Christina Hall Im glad I was able to help! If my answers were helpful don't forget to up vote them!

Happy coding.

Amandeep Dindral
Amandeep Dindral
8,915 Points
Amandeep Dindral
Amandeep Dindral
8,915 Points

Christina Hall Youre welcome:) I think the problem is your img src in your about.html page. You have a space between profiles2 and (2). Try removing the space. Let me know if this helps!

Christina Hall
Christina Hall
2,914 Points

Thanks for the suggestion, but changing the src didn't help. The image title had a space, but based on your feedback I tried to put in different images. I used one of the images that were provided with the course, but that one didn't show up either.

Christina Hall
Christina Hall
2,914 Points

That was it! I never imagined how important the right browser is. Thank you so much for your help on this. Finally I can see the picture with the right css stylings.