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 Responsive Web Design and Testing Adjust the Profile Page and Header

The images on contact page won't show?

<section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a>

        </li>
      <li>
        <a href="img/numbers-02.jpg">
          <img src="img/numbers-02.jpg" alt="">
          <p>Experimentation with color and texture.</p>
        </a>

        </li>
      <li>
        <a href="img/numbers-06.jpg">
          <img src="img/numbers-06.jpg" alt="">
          <p>Experimentation with color and texture.</p>
        </a>

        </li>
      <li>
        <a href="img/numbers-09.jpg">
          <img src="img/numbers-09.jpg" alt="">
          <p>Experimentation with color and texture.</p>
        </a>

        </li>
      <li>
        <a href="img/numbers-12.jpg">
          <img src="img/numbers-12.jpg" alt="">
          <p>Experimentation with color and texture.</p>
        </a>

        </li>
    </ul>
  </section>

My Contact.html page.

<section id="secondary"> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:786-801-9051">786-801-9051</a></li> <li class="mail"><a href="mailto:davidreasonsjr@icloud.com">davidreasonsjr@icloud.com</a></li> <li class="twitter"><a href="http://www.twitter.com">Twitter</a></li>

    </ul>
  </section>

My CSS.

/************************ GENERAL *************************/

body { font-family: 'Open Sans', sans-serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0; }

/************************ HEADING *************************/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

/************************ NAVAGATION *************************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0;

}

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; }

/************************ FOOTER *************************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #000; }

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

/************************ PAGE: PORTFOLIO *************************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float:left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7;

}

/************************ PAGE: ABOUT *************************/

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

/************************ PAGE: CONTACT *************************/

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }

.contact-info li .phone a { background-image: url('../img/phone.png'); }

.contact-info li .mail a { background-image: url('../img/mail.png'); }

.contact-info li .twitter a { background-image: url('../img/twitter.png'); }

/************************ COLORS *************************/

/* site body */ body { background-color: #fff; background: #d4e8f7; }

/* light blue header */ header { background: #7fa2bd; background-color: #999; }

/* nav background on mobile */ nav { background: #7fa2bd; }

/* logo text */ h1, h2 { color: #fff; }

h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; }

/* links */ a { color: #4d6879; }

/* nav link */ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover { color: #000; }

11 Answers

Steven Parker
Steven Parker
231,198 Points

I think I've spotted your problem.

:point_right: It looks like you have a stray space in your CSS rules.

They should probably be like this:

.contact-info li.phone a { background-image: url('../img/phone.png'); }
.contact-info li.mail a { background-image: url('../img/mail.png'); }
.contact-info li.twitter a { background-image: url('../img/twitter.png'); }

li.phone means "a list item with the class phone", but li .phone (with a space) means "an element with the class phone that is a descendant of another element that is a list item".

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li .phone a {
  background-image: url('../img/phone.png');
}

.contact-info li .mail a {
  background-image: url('../img/mail.png');
}

.contact-info li .twitter a {
  background-image: url('../img/twitter.png');
}
Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey David,

The code you're posting is fragmented. It's always best to post all of the code in the page in question when you need help with a general problem. If you've already pinpointed a piece of problematic code, then its fine to post just that section of code.

As it stands, the code you've shown us from your contact page has a closing section tag with no visible opening tag, and has no images on the page, which would explain why none are showing.

Also, you can post css, javascript, php code etc the same way as html, just use the three backticks method and paste your code in between the two sets like you have with this html. If you'd like the forum to style the code to make it more recognizable on first glance, you can write the name of the language the code is written in directly after the third backtick of the opening set. So, if these apostrophes were backticks, it would look like this:

'''css
(code here)
'''

Good luck!

Steven Parker
Steven Parker
231,198 Points

The only image on the contact page would be the profile photo, but your HTML snippet doesn't include that (do you have it on the page?). The other images only appear in the gallery on the index page.

Rather than include so much code and risk issues and omissions due to blockquoting errors, you might try making a snapshot of your workspace and posting a link to it.

But if you want to try to repair your blockquotes, remember to skip a line, then a line with just three accents ("backticks") and the code language identifier, then your code, then another line with only three accents. Like this (for css):

```css

(your code goes here)

```

Sorry. I copied it wrong. Here is the part of my contact page in question.

<section id="primary"> <h3>General Information</h3> <p>I am a freelance Web Designer. I am currently looking for new design work.</p> <p>Please feel free to contact me any time by email or through my twitter handle.</p> </section> <section id="secondary"> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:786-801-9051">786-801-9051</a></li> <li class="mail"><a href="mailto:davidreasonsjr@icloud.com">davidreasonsjr@icloud.com</a></li> <li class="twitter"><a href="http://www.twitter.com">Twitter</a></li>

    </ul>
  </section>
Steven Parker
Steven Parker
231,198 Points

I don't see in image (img tag) on this page code at all. You still have a missing section tag, so this code still appears to be just a snippet of a larger file.

Your right Steven. It's not a image. What I meant was the phone, mail, and twitter icons are not showing on my contact page in the list elements.

' ' 'css /************************ GENERAL *************************/

body { font-family: 'Open Sans', sans-serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0; }

/************************ HEADING *************************/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

/************************ NAVAGATION *************************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0;

}

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; }

/************************ FOOTER *************************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #000; }

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

/************************ PAGE: PORTFOLIO *************************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float:left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7;

}

/************************ PAGE: ABOUT *************************/

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

/************************ PAGE: CONTACT *************************/

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }

.contact-info li .phone a { background-image: url('../img/phone.png'); }

.contact-info li .mail a { background-image: url('../img/mail.png'); }

.contact-info li .twitter a { background-image: url('../img/twitter.png'); }

/************************ COLORS *************************/

/* site body */ body { background-color: #fff; background: #d4e8f7; }

/* light blue header */ header { background: #7fa2bd; background-color: #999; }

/* nav background on mobile */ nav { background: #7fa2bd; }

/* logo text */ h1, h2 { color: #fff; }

h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; }

/* links */ a { color: #4d6879; }

/* nav link */ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover { color: #000; }

' ' '

Steven Parker
Steven Parker
231,198 Points

For blockquoting, you must use accents (```), not apostrophes ('''). The accent key is usually the very left one on the top row of the keyboard, right before the numbers.

' ' 'css .contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }

.contact-info li .phone a { background-image: url('../img/phone.png'); }

.contact-info li .mail a { background-image: url('../img/mail.png'); }

.contact-info li .twitter a { background-image: url('../img/twitter.png'); } ' ' '

Sorry guys. I can't see to get this "backticks" formatting to work but thanks for your help anyways.

I got it! Thanks Steven.

Steven Parker
Steven Parker
231,198 Points

Looks like you have blockquoting down. :+1: And did that last answer solve your issue?

That was it. It was a stray space issue. Thanks again Steven.