background .png images

Question

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

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

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

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

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

.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'); }

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

Answer 1 · 2014-05-06T19:56:47Z

May 6, 2014 7:56pm

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

Answer 2 · 2014-05-05T13:12:14Z

May 5, 2014 1:12pm

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

Answer 3 · 2014-05-06T19:43:10Z

May 6, 2014 7:43pm

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.

Answer 4 · 2014-05-06T20:02:11Z

May 6, 2014 8:02pm

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.

Answer 5 · 2014-05-03T04:26:59Z

May 3, 2014 4:26am

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.

Answer 6 · 2014-05-06T01:01:04Z

May 6, 2014 1:01am

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.

Answer 7 · 2014-05-06T15:58:58Z

May 6, 2014 3:58pm

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

Answer 8 · 2014-05-06T18:24:22Z

May 6, 2014 6:24pm

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

Answer 9 · 2014-05-06T19:49:56Z

May 6, 2014 7:49pm

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

Answer 10 · 2014-05-06T20:14:02Z

May 6, 2014 8:14pm

Lol, glad it helped!

Welcome to the Treehouse Community

Looking to learn something new?

Travis brattelid

Travis brattelid

background .png images

10 Answers

Joseph Alejandro

Joseph Alejandro

Travis brattelid

Travis brattelid

Joseph Alejandro

Joseph Alejandro

Travis brattelid

Travis brattelid

Joseph Alejandro

Joseph Alejandro

Joseph Alejandro

Joseph Alejandro

Travis brattelid

Travis brattelid

Travis brattelid

Travis brattelid

Travis brattelid

Travis brattelid

Travis brattelid

Travis brattelid

Joseph Alejandro

Joseph Alejandro