From the course: Advanced CSS Media Queries

Unlock the full course today

Join today to access over 22,500 courses taught by industry experts or purchase this course individually.

Testing for conditions with and

Testing for conditions with and - CSS Tutorial

From the course: Advanced CSS Media Queries

Start my 1-month free trial

Testing for conditions with and

“

- [Instructor] What if we want to test for two conditions at the same time? For example, what if we want a style to apply to a landscape-oriented screen, where a hover state is possible? Fortunately, there's a way to do this using the word and. And you've actually seen and in action before, back in the previous chapter. We combined a min width and a max width condition to create a fixed range of browser widths where certain styles would apply. We can then apply the same construct with other types of media queries. So let's take that same example. Say that we had a landscape-oriented browser window, and on devices where hover as possible, let's make the buttons down here on the bottom red instead of blue. So to set that up, the way we would write that would very simply look like this: @media, and then we're going to run our test. hover colon hover. So if the primary device that would be used for hovering can actually…

Contents