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!

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 Prashant Tiwari
Prashant Tiwari
Courses Plus Student 385 Points

media queries not working.please help

this my code for media queries for contact page

@media screen and (max-width: 480px) { /*************************** TWO COLOUMN LAYOUT ***************************/

primary{

width:50%; float:left; }

secondary{

width:40%; float:right; } but it does not seems to work

and this is my code for contact page

''' <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Prashant Tiwari|learner </title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,400' 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> Prashant</h1> <h2>learner</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>Genral Information</h3>
<p> currently i am looking for some projies so if you are willing to work with me on your projects you can contact me </p>
<p>  Please contact me via phone only if it is urgent othewrwise , facebook is best way to reach me </p> 
</section>
<section id="secondary">
<h3>Contact Details </h3>
<ul class="contact-info">
   <li class="phone"><a href="tel:+918604237439">8604237439</a></li> 
   <li class="mail"><a href="mailto:sumiit.prashant.june@gmail.com"> sumiit.prashant.june@gmail.com </a></li>
   <li class="fb"><a href="https://www.facebook.com/sumiit.prashant"> fb </a></li>
</section>

<footer>
<a href="https://www.facebook.com/sumiit.prashant"><img src="img/facebook-wrap.png" alt="facebook-logo" class ="social-icon"></a>
<a href="https://www.twitter.com/sumiit.prashant"><img src="img/twitter-wrap.png" alt="twitter-logo" class ="social-icon"></a>
<p>&copy; PKT 2015</p>
</footer>
</div>

</body> </html>'''

1 Answer

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

Do you have a closing bracket for the media query? I'm not seeing one above. Should be:

@media screen and (max-width: 480px) { 
/*************************** TWO COLOUMN LAYOUT ***************************/

   primary {

      width: 50%; 
      float: left; 
   }

   secondary {

      width: 40%; 
      float: right; 
   }
}
Prashant Tiwari
Prashant Tiwari
Courses Plus Student 385 Points

thanx emma for correcting me but still media queries are not working on chrome but it is working on firefox