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
Zach Robinson
8,862 PointsDo concurrent media queries inherit values from one another?
I noticed that while setting a media query for the page with a min-width of 1025px, I did not have to specify that the display property for the .main-nav and .main-header was flex before I assigned the values inside to respond as if they were flex items. Is this because it was previously established in our first media query, applying to displays with a min-width of 769px? It seems like it would make sense, because technically a screen size >1025px is ALSO >769px, so my uninformed theory would be that that value also applies; however, I don't believe I learned that in a previous lesson.
2 Answers
Jason Anders
Treehouse Moderator 145,863 PointsHey Zach. Amazing Question.
The short answer would be yes. If the queries are written in a way that they don't override each other as Jonathan explained, the "Cascading" effect of CSS applies to Media Queries. So, in your example, what was in min-width: 769px will apply to everything in a screen size of min-width: 1025px. So, yes, you could just add on from there.
Keep Coding! :)
Jonathan Grieve
Treehouse Moderator 91,254 PointsSay you have a media query that targets widths of 480px.
@media screen and (max-width: 480px)
And in that media query you gave divs with the class of red, the color red.
.red {
color: red;
}
Since you're targeting widths at 480px or less this will take affect as such. Unless you overwrite it with another media query at 320px.
@media screen and (max-width: 320px) {
.red {
color: blue;
}
}
also if you have a double media query in which you set a minimum and maximum breakpoint there's no overflow so no changes would take effect.
@media screen and (min-width: 0px) and (max-width: 480px) {
}
Hope this helps :)
Zach Robinson
8,862 PointsI understand. I guess my question is, can a value inside a media query carry over to another media query? Essentially, I know that the display type of an element must be set to flex if I want to manipulate it as a flex element; therefore, in my media query of min-width:769px, I established display:flex. In a subsequent media query (which was min-width:1025px), I continued to edit the elements using flex properties, but I didn't have to set the display type to flex a second time. Is that because the media query establishes values for all subsequent media queries unless it is explicitly overwritten? Using your example above: Say that instead of changing your ".red" class to the color blue in your "max-width:320px" media query, you altered a different element altogether, leaving the class untouched. Will the font color still remain red under 320px, even though you didn't specify that in your newest media query, because you established it in a previous media query?
Jonathan Grieve
Treehouse Moderator 91,254 PointsYes it does. Any CSS value you write in a media query will carry along through the rest of the file. Up to down. What you're essentially doing with a media query is setting a condition for the browser to follow. If the screen is this size or less... or more in other cases... do this... but if not, do not run this rule.