My @media queries aren't working on mobile devices

This is likely because you don't have a viewport set.

Place the following meta tag in the <head> element of your document.

<meta name="viewport" content="width=device-width, initial-scale=1">

For more information, read "Using the viewport meta tag to control layout on mobile browsers " - (mdn)


You can use (max-device-width:1080px) instead. It passes viewport and applys on device width.