Search code examples
cssmedia-queries

media query not working

I'm trying to use a couple stylesheets based on window size (phone or just very small desktop browser window). This works on neither. That is, I only see the style from 1024+.css Can someone help me out? 

<!-- small display -->
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="resources/styles/small_device.css" />
<!-- widescreen -->
<link rel="stylesheet" type="text/css" href="resources/styles/1024+.css" />

Thank you

Solution

  • You code works as intended - it loads the first stylesheet on small screens and always loads the 1024+.css so the rules in the first stylesheet get overwritten every time.

    Add a media query restriction for the larger screens as well