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
Anna Parker
Courses Plus Student 4,399 PointsResponsive.css - works for larger screens, but not mobile
When I added the responsive.css file, it created several issues. Generally things are fine for medium and large screens, but not for mobile. For example, I started with two columns for mobile on my portfolio page, then changed it to three for larger screens. But now it's always at three, no matter the size.
The other problem is my contact page. In the process of moving from one column to two, my contact info got all jumbled up.
Here's the responsive.css file:
@media screen and (min-width: 480px) {
}
/************************** TWO COLUMN LAYOUT **************************/
primary {
width: 50%; float: left; }
secondary {
width: 40% float: right; }
/************************** 3 * 5 = 15% 100 - 15 = 85% 85 / 3 = 28.3333333333% **************************/
/************************** PAGE: PORTFOLIO **************************/
gallery li {
width: 28.3333% }
gallery li:nth-child(3n + 1) {
clear: left; }
/************************** PAGE: ABOUT **************************/
.profile-photo { float: left; margin: 0 5% 80px 0; }
@media screen and (min-width: 660px) {
}
/************************** HEADER **************************/
nav { background: none; float: right; font-size: 1.125em; margin-right: 5% text-align: right; width: 45%; }
logo {
float: left; margin-left: 5%; text-align: left; width: 45%; }
h1 { font-size: 2.5em }
h2 { font-size: 0.825em; margin-bottom: 20px; }
header { border-bottom: 5px solid linear-gradient(#2d8dad, #fff); margin: bottom: 60px; }
Thank you!
6 Answers
Timo J.
Courses Plus Student 20,919 PointsCan you show your HTML plz?
Anna Parker
Courses Plus Student 4,399 PointsIndex.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Anna Parker | Iphoneography</title> <link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Economica:400,700" rel="stylesheet"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Anna Parker</h1> <h2>Iphoneography</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/stormy sky santa monica.jpg"> <img src="img/stormy sky santa monica" alt=""> <p>Storm clearing, Santa Monica Pier.</p> <a/> </li> <li> <a href="img/santa monica stormy pier.jpg"> <img src="img/santa monica stormy pier.jpg" alt=""> <p>Sky and wheel, Santa Monica Pier.</p> <a/> </li> <li> <a href="img/yosemite tree 2.jpg"> <img src="img/yosemite tree 2.jpg" alt=""> <p>Stark beauty, Yosemite.</p> <a/> </li> <li> <a href="img/mono lake.jpg"> <img src="img/mono lake.jpg" alt=""> <p>High country sunset, Mono Lake.</p> <a/> </li> </li> <li> <a href="img/yosemite tunnel flowers-2.jpg"> <img src="img/yosemite tunnel flowers-2.jpg" alt=""> <p>Wildflowers, Yosemite.</p> <a/> </li> <li> <a href="img/santa monica pier night 2.jpg"> <img src="img/santa monica pier night 2.jpg" alt=""> <p>City lights, Santa Monica Pier.</p> <a/> </li> <li> <a href="img/beach house.jpg"> <img src="img/beach house.jpg" alt=""> <p>On the edge, North Carolina Outer Banks.</p> <a/> </li> <li> <a href="img/alameda flowers.jpg"> <img src="img/alameda flowers.jpg" alt=""> <p>Beauty in the Bay, California.</p> <a/> </li> <li> <a href="img/bondi craters.jpg"> <img src="img/bondi craters.jpg" alt=""> <p>Moon Craters, Bondi Beach.</p> <a/> </li> <li> <a href="img/alameda sunset.jpg"> <img src="img/alameda sunset.jpg" alt=""> <p>Ecstatic sunset, San Francisco Bay.</p> <a/> </li> <li> <a href="img/rock on tree 2.jpg"> <img src="img/rock on tree 2.jpg" alt=""> <p>Alien landscape, Yosemite.</p> <a/> </li> <li> <a href="img/pier obx.jpg"> <img src="img/pier obx.jpg" alt=""> <p>Sea, sky, and structure, North Carolina Outer Banks.</p> <a/> </li> <li> <a href="img/poppies 2.jpg"> <img src="img/poppies 2.jpg" alt=""> <p>Poppies, California.</p> <a/> </li> <li> <a href="img/metal tree.jpg"> <img src="img/metal tree.jpg" alt=""> <p>Sculpture, North Carolina Museum of Art.</p> <a/> </li> </ul> </p> </section> <footer> <a href="http://twitter.com/ynot_anna"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/anna.parker.562"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2017 Anna Parker</p> </footer> </div> </body> </html>
Contact.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Anna Parker | Image & Design</title> <link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Economica:400,700" rel="stylesheet"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Anna Parker</h1> <h2>Image & Design</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>General Information</h3> <p>A more comprehensive gallery can be found on Instagram. Follow me there!</p> </section> <section id="secondary"> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:559-978-4250">559-978-4250</a></li> <li class="mail"><a href="mailto:ynotanna@hotmail.com">ynotanna@hotmail.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=ynot_anna">@ynot_anna<a/></li> </ul> </section> <footer> <a href="http://twitter.com/ynot_anna"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/anna.parker.562"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2017 Anna Parker</p> </footer> </div> </body> </html>
Timo J.
Courses Plus Student 20,919 PointsSorry this is not helpful and not understandable... you should share the file not copy past the code
Anna Parker
Courses Plus Student 4,399 Points
Timo J.
Courses Plus Student 20,919 PointsThis is what I see when I click on the links:
"It appears the page you're looking for doesn't exist."
Anna Parker
Courses Plus Student 4,399 PointsOh. :-/ How do I share the file?