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 trialEric Denton
4,552 PointsAt >480px preview, NAV bar and #logo "disappear" and all page elements move up into the previous NAV area (on all pages)
I even went back through Nick's code (in the "DOWNLOADS") and went line for line and am doing everything the same... However, when I load his in a browser - IT WORKS?
I tried changing the "RESPONSIVE.CSS" "NAV" background direction from "none" to "inherit" and that only made the nav area green again...
Eric Denton
4,552 Pointsmain.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 {
float: 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;
}
/**************************
NAVIGATION
***************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding:15px 10px;
}
/**************************
FOOTER
***************************/
footer {
font-size: 0.75em;
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: 10px auto 30px;
border-radius: 10px 40px;
}
/**************************
PAGE: CONTACT
***************************/
.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;
}
Eric Denton
4,552 Pointsresponsive.css
@media screen and (min-width: 480px) {
/**************************
TWO COLUMN LAYOUT
***************************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
/**********************************
PAGE: PORTFOLIO
***********************************/
/**************************
3 columns x 5 margin/each (2.5 each side per item)= 15
100% - 15% = 85% space left over to split 3 ways
85 / 3 = 28.333333333333
***************************/
#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;
}
}
1 Answer
Stephan L
17,821 PointsAt 660px, you float your "nav" and "logo" elements, which collapses the parent header element.
Not sure if that's covered yet in this part of the course, but floating elements will take them out of the normal document flow. If elements are floated out of a parent container that has no other content to give the parent container height, then that parent container will collapse.
In this case, your nav and logo elements are not actually disappearing: the text color is the same as the body background color (white) so you're not seeing them. The green background of the header element has collapsed.
A simple fix is setting an explicit height for the header element. I added "height: 150px" on the header element in the 660px media query and that seemed to solve the problem.
Later on, you may see a trick called a "clearfix" which accomplishes the same thing.
Hope that helps!
Eric Denton
4,552 PointsThanks! I like the height adjustment!
I knew the nav and logo were there, but I couldn't do anything about it (I suppose that's the purpose of TREEHOUSE!)... I ended up pasting all of Nick's source code in mine, and lo and behold... IT WORKS?!? I cmnd+Z/cmnd+Y 'd each pasting to see if I could figure out what I messed up and I still don't know. I even found a line Nick forgot to close with an ";" (seems like it really didn't affect anything, just a syntax thing I suppose).
Thanks for your help!
Eric Denton
4,552 PointsEric Denton
4,552 PointsIf you're curious: index page