Here's an example of using both min- and max-width in a media query. @media only screen and (max-width: 600px) and (min-width: 400px) {...} The query above will trigger only for screens that are between 600px and 400px wide. Want to figure out how to target a specific device based on the screen's width?

// Extra small devices (portrait phones, less than 576px) @media (max-width: 575.98px) { ... } // Small devices (landscape phones, 576px and up) @media (min-width: 576px) and (max-width: 767.98px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) and (max-width: 991.98px) { ... }

If you want the element to always be at 50% width, and not exceed 75ch in width on larger screens, use width: min(75ch, 50%); to set the maximum size. Use the min() function to set a maximum width. In the same way, you can set a minimum size for legible text using the max() function, as in width: max(45ch, 50%); .

max-width is the width of the target display area, e.g. the browser; max-device-width is the width of the device's entire rendering area, i.e. the actual device screen.