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 Build a Three Column Layout

background .png images

on the mobile version it shows up right but when i expand it to ipad or pc size, the images are behind my "general information" instead of floating right when i command them to. the images show up but in the wrong spot

<!--------here is my responsive layout for it..----->

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

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

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

#seconday { width: 40%; float: right; } <!------------my main.css for it...-------------------------->

.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; color: white; }

.contact-info a:selected { color:white; }

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

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

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

<!-----------and my html------------>

<div id="wrapper"> <section id="primary"> <h3>General Information</h3> <p>I am available for band gigs or making art of your choice. If you have any questions please contact me.</p> <p>Please only use my phone for urgent inquiries otherwise twitter or email are the best ways to reach me.</p> </section> <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:travis@example.com">travis@example.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=tarv21">@tarv21</a></li> </ul>
</section>

10 Answers

Joseph Alejandro
Joseph Alejandro
1,428 Points

The problem is that you miss typed "#seconday" on your two column css selector and its supposed to be #secondary. If it this helped you can mark it as best answer, that would help me :)

<code> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Travis Brattelid | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Crafty+Girls|Roboto+Slab' 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"> <h1>Travis Brattelid</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section id="primary"> <h3>General Information</h3> <p>I am available for band gigs or making art of your choice. If you have any questions please contact me.</p> <p>Please only use my phone for urgent inquiries otherwise twitter or email are the best ways to reach me.</p> </section> <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:travis@example.com">travis@example.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=tarv21">@tarv21</a></li> </ul>
</section> <footer> <a href="http://twitter.com/tarv21"> <img src="http://www.jpshealthnet.org/uploadedImages/About_JPS/News_and_Events/twitter-icon.png" class="social-icon" /> </a> <a href="http://facebook.com/tarvisb"> <img src="http://nuttyscientists.com/wp-content/uploads/2013/10/facebook-icon.png" class="social-icon" /> </a> <p>© 2014 Travis Brattelid.</p> </footer> </div> </body> </html> </code>

Joseph Alejandro
Joseph Alejandro
1,428 Points

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

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

just make sure to leave a line before the first three backticks.

omg i told myself if this is just some sort of mispelling im going to throw my computer lol but im glad it was just that i spose. thanks a lot man. appreciate your time.

Joseph Alejandro
Joseph Alejandro
1,428 Points

I had the same problem once and it was because I had a the values for the class element misspelled. I would check the id element on of the second section element of your contact.html page. If you could post your contact page here I could help you identify the problem.

Joseph Alejandro
Joseph Alejandro
1,428 Points

OK but I meant the html code of the page not just the content to see if something is wrong there or misspelled which is something that happens very often and its a pain to identify.

lo woops.. for some reason it i cant get the code to show.. where do i put the code blocks? and its just looks like this i think if it shows up.....<code>kjasjds</code>

yea not showing up........

as you can tell, everytime i tried to copy and paste my html code it just shows up as if it was edited. im a failure lol

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Travis Brattelid | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Crafty+Girls|Roboto+Slab' 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">
        <h1>Travis Brattelid</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html" class="selected">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section id="primary">
        <h3>General Information</h3>
        <p>I am available for band gigs or making art of your choice. If you have any questions please contact me.</p>
        <p>Please only use my phone for urgent inquiries otherwise twitter or email are the best ways to reach me.</p>
      </section>
      <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:travis@example.com">travis@example.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=tarv21">@tarv21</a></li>
        </ul>      
      </section>
      <footer>
        <a href="http://twitter.com/tarv21">
          <img src="http://www.jpshealthnet.org/uploadedImages/About_JPS/News_and_Events/twitter-icon.png" class="social-icon" />
        </a>
        <a href="http://facebook.com/tarvisb"> 
          <img src="http://nuttyscientists.com/wp-content/uploads/2013/10/facebook-icon.png" class="social-icon" />
        </a>
        <p>&copy; 2014 Travis Brattelid.</p>
      </footer>
    </div>
  </body>
</html>