Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Anna Parker
PLUS
Anna Parker
Courses Plus Student 4,399 Points

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

Anna Parker
PLUS
Anna Parker
Courses Plus Student 4,399 Points

Index.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.
PLUS
Timo J.
Courses Plus Student 20,919 Points

Sorry this is not helpful and not understandable... you should share the file not copy past the code

Timo J.
PLUS
Timo J.
Courses Plus Student 20,919 Points

This is what I see when I click on the links:

"It appears the page you're looking for doesn't exist."