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

CSS

Joshua Holland
Joshua Holland
2,865 Points
Posted by Joshua Holland
Joshua Holland
2,865 Points

background images arent linking with text

I have just reached the responsive CSS portion of my lesson and once I made my break points and enlarged my screen, the background photos icons such as the phone, email and facebook icons are not moving with the corresponding tel number, email and facebook link. They stay on the left side of the screen and overlap with my general information whereas the tel number, ect. floats to the right side. Here is the coding that I have so far. 

<ul class="contact-info">
        <li class="phone"><a href="tel:555-555-5555">555-555-5555</a></li>
        <li class="mail"><a href="mailto:joshholland90@gmail.com">joshholland90@gmail.com></a></li>
         <li class="facebook"><a href="http://Facebook.com/herefromapathy">Facebook</a></li>
        </ul>

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

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

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

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

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

responsive CSS 

@media screen and (min-width: 480px) {

#primary {
  width: 50%;
  float: left;


  }

  #secondary {
  width:40%;
  float: right;

}
Joshua Holland
Joshua Holland
2,865 Points
Joshua Holland
Joshua Holland
2,865 Points

I cant get my CSS code to post right...

Sidney François
Sidney François
2,092 Points
Sidney François
Sidney François
2,092 Points

Joshua Holland Would you mind telling me what the name of the course and what exercise number is?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I fixed your code formatting. You can click on the "edit" button for your question and you'll be able to see the changes I made.

Joshua Holland
Joshua Holland
2,865 Points
Joshua Holland
Joshua Holland
2,865 Points

The course name is responsive web design and testing and it is stage 8.

Thank you for fixing the formatting Jason, I appreciate it.

Sidney François
Sidney François
2,092 Points
Sidney François
Sidney François
2,092 Points

Joshua Holland I am sorry, but I can't seem to find your course or the particular exercise you're working on. I found this, but it doesn't appear to have an 8th stage. Thus, with the little bit of code your provided I am not able to re-create the problem.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Sidney, the course is "How to make a website"

Joshua Holland
Joshua Holland
2,865 Points
Joshua Holland
Joshua Holland
2,865 Points

Sorry about that Sidney. I got the course name and stage name mixed up. Jason is right, it's "How to make a website" stage 8 which is responsive web design and testing.

6 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Ok, so the problem is with your secondary id section.

See my last comment to my other answer. You didn't place your contact details html inside the <section> element

You have this:

<h3>Contact details</h3>
          <ul class="contact-info">
        <li class="phone"><a href="tel:503-828-5594">503-828-5594</a></li>
        <li class="mail"><a href="mailto:joshholland90@gmail.com">joshholland90@gmail.com></a></li>
         <li class="facebook"><a href="http://Facebook.com/herefromapathy">Facebook</a></li>
        </ul>
          <section id="secondary">
          </section>

All the contact details html has to go inside the section element.

For your other errors you have a lot of links like this:

<li><a href="Index.html" </a>Home</a></li>

It should be like this:

<li><a href="Index.html">Home</a></li>

You'll have to go through and fix all of those and keep checking it in the validator.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Joshua,

One reason this could happen is that your secondary column is not floated.

The css you have for #secondary looks correct but I don't see a closing curly brace for the 480px media query. Do you have one before the next media query begins?

I would also check or post the html for this to see if your id is correct.

Also, are you sure that responsive.css is linked properly and working?

Joshua Holland
Joshua Holland
2,865 Points
Joshua Holland
Joshua Holland
2,865 Points

Hey Jason. You're right, I did not have a closing brace on the media query. I added the brace and that did not resolve the issue. I'm not quite sure what you mean when you say the secondary column is not floated when it's set to float: right; can you explain this please?

I did background color tests to make sure the responsive CSS is working properly.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I should have clarified what I meant by that. You do have float: right; correctly in place but if there was another problem that would cause that style to not be applied then that would result in the problem you're describing.

So for example, if you have the id wrong in the html then it wouldn't match the selector in the css and the float: right declaration would not be applied.

To be clear, this looks correct to me:

 #secondary {
  width:40%;
  float: right;

}

but there could be something that is causing that not to be applied.

Have you double checked your html, or better yet, can you post it?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You should have something like this for the section wrapping the contact details:

<section id="secondary">
        <h3>Contact Details</h3>
        <ul class="contact-info">
          <li class="phone"><a href="tel:555-6425">555-6425</a></li>
          <li class="mail"><a href="mailto:nick@example.com">nick@example.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
        </ul>
      </section>

Make sure that the id is correct. Otherwise the float and width styles for #secondary won't be applied and it would produce the problem that you're describing.

Joshua Holland
Joshua Holland
2,865 Points
Joshua Holland
Joshua Holland
2,865 Points

This is the HTML for the class in question. Do you need more than this?

<body>
      <header>
        <a href="index.html" id="logo">
            <p class="centeredImage"><img src="HFA/hfa logo.png" alt=""></p>
        <h1>Metal from portland OR</h1>
       </a>
       <nav>
        <ul>
            <li><a href="Home.html" class="selected"</a>Home</a></li>
            <li><a href="Members.html"</a>Members</a></li>
            <li><a href="Contact.html"</a>Contact</a></li>
            <li><a href="http://reverbnation.com/herefromapathy">Music</a></li>
            <li><a href="About.html"</a>About</a></li>
            <li><a href="Merch.html"</a>Merch</a></li>
          </ul>
          </nav>
      </header>
      <div id="wrapper">
          <section>
            <ul id="band-pic">
            <li>
              <a href="HFA/HFA show.jpg"</a>
                <img src="HFA/HFA show.jpg"alt="">
                </a>
              </li>
            </ul>
          </section>
          <footer>
                <a href="http://facebook.com/herefromapathy"><img src="HFA/fb logo.png" alt="Facebook logo" class="social-icon"></a>
                <a href="http://reverbnation.com/herefromapathy"><img src="HFA/Reverb.png" alt=" Reverb Logo" class="social-icon"></a>
            <p>&copy; 2014 Here From Apathy.</p>
          </footer>
      </div>
     </body>
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Yes, post everything in the body.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

That looks like your index page. Can you post the page which contains the "contact-info" class?

Also, if you decide to edit your post to do it then leave a comment saying you've done so. We don't receive notifications when posts are edited.

Sidney François
Sidney François
2,092 Points
Sidney François
Sidney François
2,092 Points

Hey Joshua, we need 3 things:

  1. The complete contact.html mark-up.
  2. Complete responsive.css
  3. Complete main.css

If you want to, you can just shoot me your files in a .zip file to sidney.francois@gmail.com – which would probably debugging much more efficient.

Also, sidenote: Your index.html mark-up is quite messy. The anchor-tags aren't properly formatted. Most important thing about web design (and development in general): Clean and properly formatted code. It's a good habit to get into. ;)

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Sidney,

It's the contact page.

The icons are showing up so it's unlikely to be a problem in "main.css"

Sidney François
Sidney François
2,092 Points
Sidney François
Sidney François
2,092 Points

Whoops. Typo on my part.

And sure, it shouldn't be problem in the contact section of the main.css. But then again, he added content to the .html pages that aren't necessarily part of the tutorial, so he might have added some CSS as well. I just want to get an overview. Because right now it seems impossible to tell.

Ismael Uriarte
Ismael Uriarte
10,403 Points
Ismael Uriarte
Ismael Uriarte
10,403 Points

It looks like you have too many closing( </a> ) tags.

Sidney François
Sidney François
2,092 Points
Sidney François
Sidney François
2,092 Points

That's the wrong page any way. He should have posted the contact.html instead of index.html.

Ismael Uriarte
Ismael Uriarte
10,403 Points
Ismael Uriarte
Ismael Uriarte
10,403 Points

It looks like you have too many closing link tags.

Joshua Holland
Joshua Holland
2,865 Points
Joshua Holland
Joshua Holland
2,865 Points

Sorry guys, I'm totally new at this. I realized I had a lot of errors when I uploaded my HTML to check it and got 36 errors! :S Any advice you can give me is greatly appreciated. Here are those codes you requested. 

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>Here From Apathy | Band</title>
      <link rel="stylesheet" href="css/normalize.css">
      <link href='http://fonts.googleapis.com/css?family=Bangers|Geostar+Fill' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="css/main.css">
      <link rel="stylesheet" href="css/responsive.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
      <header>
        <a href="index.html" id="logo">
            <p class="centeredImage"><img src="HFA/hfa logo.png" alt=""></p>
        <h1>Metal from portland OR</h1>
       </a>
       <nav>
        <ul>
            <li><a href="Index.html" </a>Home</a></li>
            <li><a href="Members.html"</a>Members </a></li>
            <li><a href="Contact.html" class="selected"</a>Contact</a></li>
            <li><a href="http://reverbnation.com/herefromapathy">Music</a></li>
            <li><a href="About.html"</a>About</a></li>
            <li><a href="Merch.html"</a>Merch</a></li>
          </ul>
          </nav>
      </header>
      <div id="wrapper">
          <section id="primary">
            <h3>General information</h3>
            <p>We are currently seeking to play shows. If you are looking for an awesome band, hit us up!</p>
            <p>Feel free to contact us by phone, email or social media.</p>
          </section>
          <h3>Contact details</h3>
          <ul class="contact-info">
        <li class="phone"><a href="tel:503-828-5594">503-828-5594</a></li>
        <li class="mail"><a href="mailto:joshholland90@gmail.com">joshholland90@gmail.com></a></li>
         <li class="facebook"><a href="http://Facebook.com/herefromapathy">Facebook</a></li>
        </ul>
          <section id="secondary">
          </section>
          <footer>
                <a href="http://facebook.com/herefromapathy"><img src="HFA/fb logo.png" alt="Facebook logo" class="social-icon"></a>
                <a href="http://reverbnation.com/herefromapathy"><img src="HFA/Reverb.png" alt=" Reverb Logo" class="social-icon"></a>
            <p>&copy; 2014 Here From Apathy.</p>
          </footer>
      </div>
     </body>
</html>

@media screen and (min-width: 480px) {

/********************************************
two column layout
********************************************/

  #primary {
  width: 50%;
  float: left;


  }

  #secondary {
  width:40%;
  float: right;

}
}


/********************************************
PAGE: members
********************************************/

#gallery li {
    width: 28.3333%;
  }

 #gallery li:nth-child(4n) {
  clear:left;
}


  /********************************************
PAGE: About
********************************************/

  .aboutphoto {
    float: left;
     margin: 0 5% 80px 0;
  }



  /********************************************
PAGE: header
********************************************/


@media screen and (min-width: 660px) {
  nav {
    background: none;
    float: right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
    width: 45%;
  }


#logo {
  float: left;
  margin-left: 5%;
  text-align: left;
  width: 45%;
  }

  h1 {
    font-size: 2.5em;
  }

  h2 {
    font-size: 0.825em;
    margin-bottom: 20px;
  }

  header {
    border-bottom: 5px solid #cf5300;
    margin-bottom: 60px;
  }
}
Sidney François
Sidney François
2,092 Points
Sidney François
Sidney François
2,092 Points

Hey Joshua,

Just relax. We all start somewhere. ;)

By now, I have found the original project files of the Team Treehouse course.

First things first: You need to clean up your mark-up. The correct syntax for a link is <a href="location.html">Link Name</>.

Your navigation is littered with poorly formatted links.

<li><a href="Index.html" </a>Home</a></li>

should be 

<li><a href="Index.html">Home</a></li>

etc.

Second: Yes, even CSS likes to maintained. There are various style guides on how to properly format CSS, but if you're lazy like me you can just beautify it.

But still, you will need to make sure you pay attention to opening and closing brackets. If you find yourself making a lot of mistakes that means you're moving too fast and not paying attention to coding. Take a step back, and whenever you create or edit a CSS rule for a class or and ID, make sure the brackets are in the right place.

Media queries need special attention. You want to be sure to only include CSS code in a query that you actually want to include in the media query. Comparing your CSS code to the original project files, I see that (for some reason) not all of the CSS that is supposed to go into the min-width(480px) media query is included.

This is what it should look like.

@media screen and (min-width: 480px) {

  /**********************************
  TWO COLUMN LAYOUT
  ***********************************/

  #primary {
    width: 50%;
    float: left;
  }

  #secondary {
    width: 40%;
    float: right;
  }



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

  #gallery li {
    width: 28.3333%;
  }

  #gallery li:nth-child(4n) {
    clear: left;
  }

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

  .profile-photo {
    float: left;
    margin: 0 5% 80px 0;
  }

}

Other than that Jason seems to already have found the problem (putting your ul list inside the <section id="secondary">).

Apart from what I have already mentioned: Make sure that you code properly and cleanly. It will lead to less mistakes and thus less debugging. I personally love writing new code, instead of constantly fixing the old one. ;)