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 trialJacob Cordeiro
934 PointsIm about halfway through the lesson and the #primary and #secondary columns to work.
the footer is appearing right next to the contact info and the icons for the phone and the email are not appear ing. i have triple checked and the code seems right to me. can anyone else see something wrong?
heres my css
@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%
}
@media screen and (min-width: 660px){
}
and heres my html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jacob Cordeiro| Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Jacob Cordeiro</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.htlm" >Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.htlm" class="selected">Contact</a></li>
</ul>
</nav>
</header>
<div id="wraper">
<section id="primary">
<h3>General Information</h3>
<p>I am not currently looking for a job because I am do not have the skill yet, but I will post my contact info and change this paragraph when I am ready!</p>
<p>I just have these icons up so when Im ready I can put my info up :-) </p>
</section>
<section id="secondary">
<h3> Contact Info</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:000-000"></a>000-000</li>
<li class="mail"><a href="mailto:nick@example.com">nick@example.com</a></li>
</ul>
</section>
<footer>
<p>© 2014 Jacob Cordeiro.</p>
</footer>
</div>
</body>
</html>
Thanks :-)
14 Answers
Wayne Priestley
19,579 PointsHi Jacob,
I've just been looking at the link you sent me for you site. I know what your after now (i think).
@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%;
}
footer{
clear: both;
}
}
Wayne Priestley
19,579 PointsIf you replace your code with that and let me know if it's what you were after.
Wayne Priestley
19,579 PointsJacob,
It looks like you have the 480px media query closed two lines after you open it. Try moving your }
to the end of the media query.
Hope this helps.
Jacob Cordeiro
934 PointsI saw that and fix it but still same
@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%;
}
}
@media screen and (min-width: 660px){
}
Wayne Priestley
19,579 PointsHere is a link to explain how to use Markdown to post your code How to post code
Wayne Priestley
19,579 PointsJacob,
If you change you css for the #primary
and #secondary
to this:
.wrapper #primary {
}
.wrapper #secondary {
}
That should do it.
Wayne Priestley
19,579 PointsHi Jacob,
Could you post the code that includes the img url please.
Jacob Cordeiro
934 PointsWhat do you mean?
Jacob Cordeiro
934 Pointsheres the link to the site http://web-wu9ziunjq1.treehouse-app.com/contact.html
Wayne Priestley
19,579 PointsIgnore the request to post more code, it's the media query error thats causing the problem as i described above.
Jacob Cordeiro
934 Pointsdo i delete the width and float?
Jacob Cordeiro
934 PointsThanks for trying to help me.But in the video, for the contact page it was in 2 columns with 1 the paragraph on 1 side of the page and the number/email on the other. I typed what you sent me and it didn't do anything :-(
Wayne Priestley
19,579 PointsTake a look at this Jacob.
Jacob Cordeiro
934 Pointsno doctype :-)
Wayne Priestley
19,579 PointsI had to remove that for code pen,
I just pasted the css i wrote and replaced it in your responsive.css file and i got this, i didn't change any of your html.:
Jacob Cordeiro
934 PointsThat helped with the columns but, the icons for the phone and email are not there. any advice?
Wayne Priestley
19,579 PointsYou need to add a .
before contact-info as its a class.
Jacob Cordeiro
934 PointsOK your answer almost worked.The email icon is right but the phone simple is 1 margin above the number. Here is the website so you can see http://web-wu9ziunjq1.treehouse-app.com/contact.html
Wayne Priestley
19,579 PointsAdd a float: left;
.contact-info li.phone a {
background-image: url('../img/phone.png');
float: left;
Jacob Cordeiro
934 PointsWhen I did that the icon disappeared.
Wayne Priestley
19,579 Pointscan you change to this:
<ul class="contact-info">
<li class="phone"><a href="tel:000-000">000-000</a></li>
Remove the clear left in your css
Jacob Cordeiro
934 PointsIT WORKED.THANK YOU
Wayne Priestley
19,579 PointsNo problem Jacob,
:)
Glad it all worked out (eventually) lol
Jacob Cordeiro
934 PointsWhy don't have a best comment..... want to post what you said as a answer? Ill best answer it.
Wayne Priestley
19,579 PointsYeah I know, you can only best a answer and not a comment. You'll just have to best the css answer as it was the solution to half the problem, we'll call the rest fine tuning :)
Wayne Priestley
19,579 PointsWayne Priestley
19,579 PointsI've edited your code so it appears correct in your post.