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 trialRay Foote
982 Pointsthe breakpoint for devices 480px or larger is what has me messed up. min-width isn't working.
not sure what I'm doing wrong here
@media screen and (min-width: 480px) {
h1 {
font-size: 2.5em;
}
}
a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
}
#logo {
text-align: center;
margin: 0;
}
h1, h2 {
color: #fff;
}
nav a {
color: #fff;
}
nav a:hover {
color: #32673f;
}
h1 {
font-family: Changa One, sans-serif;
font-size: 1.75em;
font-weight: normal;
}
img {
max-width: 100%;
}
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
.profile-photo {
display: block;
margin: 0 auto 30px;
max-width: 150px;
border-radius: 100%;
}
.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;
}
1 Answer
Jason Anders
Treehouse Moderator 145,860 PointsHey Ray,
Your code is correct, except it is not in the right place. Media Queries need to be at the end of the CSS file. If you put them at the top, then they will be over-written by the code in the CSS file. In this case, your Media Query for the h1 will be over-written and cancelled out about half way down the sheet.
Always place Media Queries at the bottom the file. This would be the "Cascading" part of CSS.
Keep Coding! :)
Sue Dough
35,800 PointsSue Dough
35,800 PointsHi Jason,
Do you think they should always go at the bottom of the file completely or just the CSS involved? Let me give you a scenario. Lets say I have 10 sass files. Lets imagine 4 of those parts are core features that are very different and use different styling/naming conventions. Would you reccomend the media queries go at the bottom even then or would it make more sense to just have the media queries at the bottom of that specific part? I know a lot of CSS files are broken down into core parts so just wondering what you think about situations like that.
Ray Foote
982 PointsRay Foote
982 PointsAhh! Yes, thank you! Duh, Cascading for a reason. ;)
Jason Anders
Treehouse Moderator 145,860 PointsJason Anders
Treehouse Moderator 145,860 PointsHey Sue Dough,
That's a really interesting question, and one I've never really given much thought to. I haven't done much front-end work and none to the caliber of your example.
However, given your example, I would leave the media queries with the specific parts. In a large project, to me, that makes the most sense logically. Putting them all at the end of one file would make readability and referencing pretty difficult. A tiny CSS file would be fine at the end, but a large one with multiple Sass files not so much.
Also, with Sass, you have the option of nesting Media Queries, so if you're nesting, the files wouldn't be at the bottom anyways.
You know, you've given a very interesting scenario. I'm going to be doing some research into what others do, but I would also be very interested in what others here on Treehouse think. Could you open a new discussion and paste your comment there, so others can see it and respond. It should make for a very informative discussion, so thank-you!