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 How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Jacob Cordeiro
Jacob Cordeiro
934 Points
Posted by Jacob Cordeiro
Jacob Cordeiro
934 Points

Im 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>&copy; 2014 Jacob Cordeiro.</p>
    </footer>
     </div>
    </body>
</html>

Thanks :-)

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

I've edited your code so it appears correct in your post.

14 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi 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
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

If you replace your code with that and let me know if it's what you were after.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Jacob,

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
Jacob Cordeiro
934 Points
Jacob Cordeiro
Jacob Cordeiro
934 Points

I 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
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Here is a link to explain how to use Markdown to post your code How to post code

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Jacob,

If you change you css for the #primary and #secondary to this:

.wrapper #primary {
}
.wrapper #secondary {
}

That should do it.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Jacob,

Could you post the code that includes the img url please.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Ignore the request to post more code, it's the media query error thats causing the problem as i described above.

Jacob Cordeiro
Jacob Cordeiro
934 Points
Jacob Cordeiro
Jacob Cordeiro
934 Points

do i delete the width and float?

Jacob Cordeiro
Jacob Cordeiro
934 Points
Jacob Cordeiro
Jacob Cordeiro
934 Points

Thanks 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
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

I 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.:

alt text

Jacob Cordeiro
Jacob Cordeiro
934 Points
Jacob Cordeiro
Jacob Cordeiro
934 Points

That helped with the columns but, the icons for the phone and email are not there. any advice?

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

You need to add a . before contact-info as its a class.

Jacob Cordeiro
Jacob Cordeiro
934 Points
Jacob Cordeiro
Jacob Cordeiro
934 Points

OK 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
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Add a float: left;

.contact-info li.phone a {
background-image: url('../img/phone.png');
    float: left;
Jacob Cordeiro
Jacob Cordeiro
934 Points
Jacob Cordeiro
Jacob Cordeiro
934 Points

When I did that the icon disappeared.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

can 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

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

No problem Jacob,

:)

Glad it all worked out (eventually) lol

Jacob Cordeiro
Jacob Cordeiro
934 Points
Jacob Cordeiro
Jacob Cordeiro
934 Points

Why don't have a best comment..... want to post what you said as a answer? Ill best answer it.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

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