CSS3 Media Queries: Resizing issue


I’m using media queries to deliver different versions of the site to different monitor resolutions/device. It’s working fine so far, except when I resize the screen to the smallest resolution, the design changes, but it’s all messed up (like it doesn’t load the handheld stylesheet). If I reload (while the screen is small), the handheld style kicks in as expected, and it all works great. Here’s my code:

<!--[if gt IE 8]>-->
<link rel="stylesheet" type="text/css" href="/large.css" media="screen and (min-width: 1501px)" />

<link rel="stylesheet" type="text/css" href="/medium.css" media="screen and (min-width: 1025px) and (max-width: 1500px)" />

<link rel="stylesheet" type="text/css" href="/small.css" media="screen and (min-width: 715px) and (max-width: 1024px)" />

<link rel="stylesheet" type="text/css" href="/handheld.css" media="handheld and (max-width: 714px), screen and (max-device-width: 714px), screen and (max-width: 714px)" />

I’m using javascript for IE 8 and less (IE 9 is supposed to support them), and the javascript actually works better. It’s part of a Wordpress theme.

Can you see something wrong with my media queries?

Could it be because I’m using Javascript extensively on this site (jQuery for a variety of effects)?

How come it’s not loading handheld right away, and only after a reload?


Never mind.

I found the problem in my javascript. It’s working like a charm now.


Yeah, that type of CSS link is only likely to load on page refresh, because once it’s loaded it can’t unload just because the viewport size changes.

To have the styles adjust when the viewport is resized, you can put the media queries within the stylesheet, like so:

@media screen and (min-device-width: 481px) { … }

I’m new to @media, and so far have only used it like this, and it works nicely.

The funny part is that it does work, except for the handheld the first time. Once I reload while on a small screen, I can resize to any size and the changes do take place.

It’s just the first time…

I’ll try to put it into the main stylesheet, see if it works that way.


I tried adding it to the regular style, and it made no difference.

OK, I’m wrong then. I find it hard to get my head around media queries… they are still a bit of a mysterious subject. :confused: Guess I need to put aside some time to study them properly.