display: flex just once is enough?

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.

Hey Daniel,

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!

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.