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
Lily Zenner
689 PointsMy header (name) and nav elements drop below my green background when displayed on a desktop screen, how to fix?
This happened somewhere between adding my media queries and adjusting the header and profile pic. I cannot figure out what went wrong!
Lily Zenner
689 PointsSure which part?
Lily Zenner
689 PointsHere is the responsive css....
@media screen and (min-width: 480px) {
/********************* TWO COLUMN LAYOUT **********************/
#primary { width: 50%; float: left; }
#secondary { width: 40%; float: right; }
/********************* PAGE: PORTFOLIO **********************/
#gallery li { width: 28.3333%; }
#gallery li:nth-child(4n) { 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 #599a68; margin-bottom: 60px; }
}
Lily Zenner
689 PointsHere is main css,,,,
/********************* GENERAL **********************/
body { font-family: 'Open Sans', sans-serif; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
a { text-decoration: none; }
img { max-width: 100%; }
h3 { margin: 0 0 1em 0; }
/********************* HEADING **********************/
header { text-align: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
logo {
text-align: center; margin: 0; }
h1 {
font-family: 'Changa One', sans-serif;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li { display: inline-block; }
nav a { font-weight: 800; padding: 15px 10px;
}
/********************* NAVIGATION **********************/
nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }
/********************* FOOTER **********************/
footer { font-size: 0.75ems; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
.social-icon { width: 20px; height: 20px; margin: 0 5px; } /********************* PAGE: PORTFOLIO **********************/
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }
gallery li a p {
margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7 }
/********************* PAGE: ABOUT **********************/
.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
/********************* PAGE: PORTFOLIO **********************/
.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'); }
.contact-info li.twitter a { background-image: url('../img/twitter.png'); } /********************* COLORS **********************/
/* site body */ body { background-color: #fff; color: #999; }
/* green header */ header { background: #6ab47b; border-color: #599a68; }
/* nav background on mobile */ nav { background: #599a68; }
/* logo text */ h1, h2 { color: #fff; }
/* links */ a { color: #6ab47b; }
/* nav link */ nav a, nav a:visited { color: #fff; }
/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }
Lily Zenner
689 PointsHere is my Index.html....
<!DOCTYPE html> <html> <head> <meta charset-"utf-8"> <title>Lily Zenner | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'> <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>Lily Zenner</h1> <h2>Designer</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/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with Blending modes and Photoshop.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's style of glows..</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using photoshop brushes.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition.</p> </a> </li> </ul> </section> <footer> <a href="http//twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http//facebook.com/lilyzenner"><img src="img/facebook-wrap.png" alt="facebook Logo" class="social-icon"></a> <p>© 2015 Lily Zenner.</p> </footer> </div> </body> </html>
Lily Zenner
689 PointsIt is happening with all pages, and only once the screen gets larger than a mobile size.
4 Answers
Jake Lundberg
13,965 Pointstry getting rid of the floats in your nav and header styles within your desktop media query.
Lily Zenner
689 PointsThat worked to get them back in the green background but now the positioning is off, nav elements are in the center as opposed to on the right side of screen (my right) and the Header is on the left but too close to the edge.
Jake Lundberg
13,965 Pointsyou will need to set the margin for your name to move it away from the edge, and you can expand the width of your nav element to 100% to get the text to align right.
Something that helps when your layout isn't cooperating is to add a border around various elements to see what is going on...
Lily Zenner
689 PointsThanks Jake! Not sure why it worked perfectly for the instructor and now for me!
Jake Lundberg
13,965 PointsJake Lundberg
13,965 PointsCould you please post your code so we can try to help?