Welcome to the Treehouse Community
The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.
Daniel Kip5,922 Points
display: flex just once is enough?
Well, regarding this video something caught my attention. Once the display is declared as flex in the first media query (769px), shouldn't I "tell it" again to my browser when it reaches 1025px?
William Hurst23,338 Points
When you add CSS rules earlier on in the CSS document (adding the base rules such as font, colours etc.) these "base" rules are still applied within the media queries due to the "cascade". So when you set the display to flex at 769px the same display value will still be used in the media query at 1025px, just like how the base rules that have been set are still being applied when using media queries (unless you change them). The only thing you need to change is the flex properties such as flex-direction as the display is still flex.
This is my first Answer to a Question, so I'm hoping you understand my explanation.
Joseph Dalton12,489 Points
I'll agree with William's answer for the most part. But I think he forgot to point out that it depends on how the media query was declared. In this case is was probably a
@media (min-width: 769px), which applies the styles to everything above the 769px size, unless they are overwritten by another style in a different media query. So in a mobile-first approach, styles tend to be declared, then adjusted as the screens get larger, building and altering each other as needed. So maybe think of media queries more as alterations or edits to the initial styles, and not resets of them.
But, if the media query was something more like
@media (min-width: 769px) and (max-width: 1024px), then you would be right, and over 1025px, the style would need to be re-declared, but that probably wouldn't be the best code organization if you still needed the style.
Hope that helps!
Daniel Kip5,922 Points
I appreciate your answers William Hurst and Joseph Dalton . Just to check if I got it right, it basically means is this other example i will give you: declaring display: flex on @media (min-width: 769px) will affect all resolutions above it, therefore, no need to declare it again on greater resolutions. If it was declared ONLY @media (min-width: 1024px) lower resolutions would not be flex.
Thanks again for your time.