I'm building a theme from scratch and I want it to use a different stylesheet for screens below a certain width, for mobile compatibility. I used this method in header.php to call the appropriate stylesheet:
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/small.css" type="text/css" media="(max-width: 900px)" /> <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" type="text/css" media="(min-width: 900px)" />
WordPress successfully uses the style.css file, but when the browser window scales down enough to call the "small" stylesheet, everything goes haywire: elements are misplaced, things disappear, etc.
I know the problem isn't with the stylesheets themselves, because they work fine when applied to a static HTML capture of the WordPress theme. As far as I can tell, WordPress is trying to call both spreadsheets at once and they are conflicting with each other.
I'm guessing this is not the intended way to implement an alternative stylesheet...?