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
Swapnil Saraf
3,088 PointsAlignment Issues
After hitting 576px - width my Logo and nav elements are not aligning in the same line
6 Answers
Helmut Granda
10,343 PointsIf you listen to the instructor closely he mentions that if your layout does not look the same as his it is OK, just to keep practicing. However, if you could share your workspace we can take a look to see where the issue is.
Based on the code you posted your are missing "px" on max-width.
/* Target a viewport range wider than 575px and narrower than 992px */
@media screen and (min-width: 576px) and (max-width: 991) {
should be
@media screen and (min-width: 576px) and (max-width: 991px) {
Swapnil Saraf
3,088 Points/* ================================================= Practice Media Queries ==================================================== */
/* Target viewport sizes less than 576px */ @media screen and (max-width: 575px) {
header { text-align: center; margin-bottom: 2.5rem; } .logo { margin-bottom: 0; } nav a { padding: 6px 0; background: #def1f9; margin: .2em 0; } img { display: none; } }
/* Target viewport sizes 576px and wider */
@media screen and (min-width: 576px) {
.logo { float: left; } nav { margin-top: 24px; } nav li { display: inline-block; margin: 0 0.45em; } h2 { margin-bottom: 1.5em; } }
/* Target a viewport range wider than 575px and narrower than 992px */
@media screen and (min-width: 576px) and (max-width: 991) {
nav { float: left; margin-left: 20px; }
}
/* Target viewport sizes 768px and wider */
@media screen and (min-width: 768px) {
.articles { float: left; width: 65%; } aside { float: right; width: 30%; } }
/* Target viewport sizes 992px and wider */
@media screen and (min-width: 991px) { nav { float: right; } }
Helmut Granda
10,343 PointsGood job! It seems like you just missed a small detail posted in the original "answer".
Karl Jones
8,761 PointsI had the same problem at the same part but didn't include the unit for the 576px so it wasn't applying. So annoying!
Heather Abrey
8,693 PointsI also had an issue where my nav elements were not centering and aligning, but I guess it's browser related. When I opened the page in Safari it was fine, but didn't work in Chrome.
Ralfs Liepa
3,081 PointsI had opened the preview in a separate window and had the same issue (also on Chrome). Closed it and re-opened it and that for some reason did the trick. Had a similar issue in an earlier practice with different elements (can't recall which).
ahmad khan
3,479 Points@media screen and (min-width: 576px) and (max-width: 991) {
nav { float: left; margin-left: 20px; }
} should be @media screen and (min-width: 576px) and (max-width: 991px) {
nav { float: left; margin-left: 20px; }
}
bendeiss
1,672 PointsFor me i had to put in "screen" after @media in order to work.