SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS3 Media Queries: Resizing issue

    Hi,

    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:

    HTML 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)" />
    <!--<![endif]-->

    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?

    Thanks

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    ETA

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

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by coopersita View Post
    The funny part is that it does work, except for the handheld the first time.
    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. Guess I need to put aside some time to study them properly.

  5. #5
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never mind.

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

    Thanks


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •