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

Posted by Vrund Patel
Vrund Patel
11,994 Points

Responsive

I cannot get my responsive.css to work.

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

/**************************
TWO COLUMN LAYOUT
**************************/
  #primary {
    width: 50%;
    float: left;
  }

  #secondary {
    width: 40%;
    float: right;
  }
Andrew K
Andrew K
13,774 Points

It looks to me that you are missing your final curly brace for your media query!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Vrund,

Please post the corresponding portion of the html.

It would also help to describe what problem you're seeing.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Are you saying that no styles from responsive.css are taking effect?

6 Answers

Andrew K
Andrew K
13,774 Points
Andrew K
Andrew K
13,774 Points

It looks to me that you are missing your final curly brace for your media query!

Vrund Patel
Vrund Patel
11,994 Points

Sorry, but that doesn't solve the problem.

Adama Sy
Adama Sy
7,076 Points
Adama Sy
Adama Sy
7,076 Points

Dude maybe post Html and css too, so we can check o both and maybe somethig in selector or somethig is ot right.

Vrund Patel
Vrund Patel
11,994 Points
Vrund Patel
Vrund Patel
11,994 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vrund Patel| Computer Science Student </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>Vrund Patel</h1>
      <h2>Computer Science Student</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Programs</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 not currently working on any projects, but I'm available for speaking gigs and similar engagements. If you have any questions, please don't hesitate to contact me!</p>
        <p>Please only use phone contact for urgent inquiries. Otherwise, Twitter and email are the best way to reach me.</p>
      </section>
      <section id="secondary">
        <h3>Contact Details</h3>
        <ul class="contact-info">
          <li class="phone"><a href="tel:123-4567">123-4567</a></li>
          <li class="mail"><a href="mailto:vrund@example.com">vrund@example.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=vrund_patel27">vrund_patel27</a></li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/vrund_patel27"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
        <a href="http://facebook.com/vrund.patel"><img src="img/facebook-wrap.png" alt="Facebook logo"  class="social-icon"></a>
        <p>&copy; 2014 Vrund Patel.</p>
      </footer>
    </div>
  </body>
</html>
Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Vrund, what is the problem exactly? When I copied and pasted your HTML and CSS into codepen everything worked as expected.

Vrund Patel
Vrund Patel
11,994 Points

Whenever I try to resize window the two column does not work .

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Which stage of the course are you on right now?

Try putting the following css at the very top of responsive.css, before the media queries:

body {
  background: orange;
}

If you see the orange background then you will at least know that responsive.css is linked properly.

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Vrund,

You're missing the viewport meta tag in your <head> tags, add the below and the media queries will start working.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Vrund Patel
Vrund Patel
11,994 Points
Vrund Patel
Vrund Patel
11,994 Points

It is working fine now, thanks everyone for help.