responsive page

Question

I am trying to make a responsive contact page. The second section should be under the first section if the screen is smaller than 480px. but nothing happen.

=====================Here is my responsive.css=====================

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

#first { width: 50%; float: left }

#second { width: 40%; float: right; }

}

=====================Here is my main.css=====================

#wrapper { max-width: 940px; margin: 0 auto; padding: 0 5%; /* background: #FFF;*/ }

img{ max-width: 100%; }

.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;

}

.contact-info li.phone a { background-image: url('../img/phone.png'); }

.contact-info li.mail a { background-image: url('../img/mail.png'); }

=====================Here is my contact.html=====================

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Grace Ji | Front End Developer</title> <link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Crimson+Text:400,400i,700,700i|Ubuntu:400,400i,700,700i" rel="stylesheet"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="index.html" id= "logo"> <h1>Grace Ji</h1> <h2>Front End Developer</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="first"> <h3> General Information</h3> <p>If you have any questions, please don't hesitate to contact me!</p> <p>Please only use phone contact for urgent inquries. Otherwise email is the best way to reach me.</p> </section> <section id="second"> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:503-319-7777">503-319-7777</a></li> <li class="mail"><a href="mailto:h.grace.ji@gmail.com">h.grace.ji@gmail.com</a></li> </ul> </section> <footer> <a href="http://wlwl16.wixsite.com/minimal-designer-por"><img src="img/wix-wrap.png" alt="img/wix.png" class="social-icon"> </a> <a href="https://www.facebook.com/hyunjung.ji.5"><img src="img/facebook-wrap.png" alt="img/facebook.png" class="social-icon"> </a> <p>© 2017 Grace Ji.</p> </footer> </div> </body> </html>

Welcome to the Treehouse Community

Looking to learn something new?

Grace Ji

Grace Ji

responsive page