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 trialALINA ZAMOGILNYKH
16,664 PointsProblems with media query (min-width 660 px) - page doesn't work correct, navigation panel disappears when expanding
Problems with media query (min-width 660 px) - page doesn't work correct, navigation panel and header disappear when expanding the window, profile picture and about text float to left (green bottom border appears though). While working with previous query (min-width 480px) everything was exactly like in the Nick's video. Don't understand what's wrong
4 Answers
ALINA ZAMOGILNYKH
16,664 PointsSure.
In my main.css I wrote two :
in header, like that:
header {
float: : left;
}
Always double check your syntax :)
Dustin Matlock
33,856 PointsHi Alina, make sure you've closed off your media query properly. If you think you've done that, we'll need some of your code to see what's going on.
For instance:
@media screen and (min-width: 660px) {
h2 {
font-size: 0.825em;
margin-bottom: 20px;
}
} /* Make sure you didn't leave this one out */
ALINA ZAMOGILNYKH
16,664 PointsYes, I checked the code several times, just can't find a mistake... Here's this part of CSS
@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;
}
}
Dustin Matlock
33,856 PointsThis part of your code is okay. Make sure the other media query is closed off as well.
ALINA ZAMOGILNYKH
16,664 PointsCSS validator service which was studied in the next stage helped to find my mistake. Of course it was a stupid mistake - some extra element in the code (in the main.css actually). Thanks for your attention anyway :)
Dustin Matlock
33,856 PointsNo problem. If you care to share your mistake, it might help other students. Glad you figured it out. Most times it's something simple.
Dustin Matlock
33,856 PointsDustin Matlock
33,856 PointsThanks for sharing! By the way, here's how to post code.