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 trialTravis brattelid
4,737 Pointsbackground .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
1,428 PointsThe 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 :)
Travis brattelid
4,737 Points<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
1,428 PointsWrap 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.
Travis brattelid
4,737 Pointsomg 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
1,428 PointsI 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
1,428 PointsOK 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.
Travis brattelid
4,737 Pointslo 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>
Travis brattelid
4,737 Pointsyea not showing up........
Travis brattelid
4,737 Pointsas 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
Travis brattelid
4,737 Points<!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>
Joseph Alejandro
1,428 PointsLol, glad it helped!