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 trialJay Valentine
Courses Plus Student 4,389 PointsWhy is mine different to Guil's?
My preview of the site doesnt look like Guil's at the end? (The Header i'm on about, i.e. Logo and Nav) this is my CSS, im unsure why its not the same as Guil's as ive followed all instruction? hmm
/* Page Styles
================================ */
* {
box-sizing: border-box;
}
html,
body{
height: 100%;
}
body {
font: normal 1.1em/1.5 sans-serif;
color: #222;
background-color: #edeff0;
}
/* Layout Element Colors
================================ */
.main-header { background-color: #384047; }
.main-logo a { background-color: #5fcf80; }
.main-nav a { background-color: #3f8abf; }
.primary-content { background-color: #caebf6; }
.secondary-content { background-color: #bfe3d0; }
.main-footer { background-color: #b7c0c7; }
/* Main Layout Styles
================================ */
.main-logo, .main-nav, .main-nav li {
float:left;
}
.main-logo {
margin: 0 50px 0 0;
}
.main-wrapper {
width: 90%;
margin: auto;
}
.main-header {
padding: 15px;
}
.main-logo a,
.main-nav a {
display: block;
color: white;
text-decoration: none;
text-align: center;
padding: 5px 15px;
border-radius: 5px;
}
.main-banner {
background: #dfe2e4;
text-align: center;
padding: 35px 15px;
}
.main-footer {
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
.main-nav li {
margin-top: 15px;
margin-right: 10px;
margin-left: 10px;
}
}
/* Column Layout
================================ */
.col {
padding: 20px;
}
/* Clearfix
================================ */
.group::after {
content: " ";
display: table;
clear: both;
}
/* Media Queries
================================ */
@media (max-width: 768px) {
.main-wrapper,
.main-nav li,
.main-logo {
width: initial;
height: initial;
float:initial;
}
.main-logo {
margin-right:0;
}
.extra-content {
display: none;
}
}
2 Answers
Andrew Robinson
16,372 PointsIf you followed along with the video like I did, the reason I discovered why the nav items don't change when it's less than 768px width is because we floated the nav left, but didn't re-initialize it in our media query.
So all you need to do is add .main-nav to the media query and it will reset the float and fix the nav display.
@media (max-width: 768px) {
.main-wrapper,
.main-nav,
.main-nav li,
.main-logo {
width: initial;
height: initial;
float: initial;
}
.main-logo {
margin-right: 0;
}
.extra-content {
display: none;
}
}
Ted Sumner
Courses Plus Student 17,967 Pointsyou have an extra } just before your column section.
Jay Valentine
Courses Plus Student 4,389 PointsStill doesnt explain why my nav wont stretch across like my logo element, but thanks ahha!
Ted Sumner
Courses Plus Student 17,967 PointsPlease post your html also.
Ted Sumner
Courses Plus Student 17,967 PointsTed Sumner
Courses Plus Student 17,967 Pointsif you put the language next to the opening three ` it will format properly. It will also often point out errors in the syntax.