Fun with Media Queries Solution – Responsive Web Design Fundamentals

Fun with Media Queries Solution – Responsive Web Design Fundamentals


This is what I put in. I needed a max-width media query that
would set the background-color to red when the screen was no
larger than 400 pixels. Then, I needed another media query that
set the background-color to blue when the screen was no
smaller than 600 pixels. And then finally, I needed to set
the background-color to green for screens between these two break points. I went ahead and did it by setting the
background-color to green before these two media queries. This way, the CSS cascade kicks in, and it’s only applied, this color here,
when these two break points are not. Of course, I easily could have put
background-color green into a media query, but well, I didn’t need to. And there it is, blue, green, and red. That wasn’t too difficult.

Leave a Reply

Your email address will not be published. Required fields are marked *