SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Blackpool, UK
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Media query for Galaxy s2 (landscape mode) not working

    Pulling my hair out trying to get the Galaxy S2 to display my responsive site in landscape mode. Code below. Works fine for iphone in landscape mode hit this media query fine.

    The resolution of an S2 display is 800x480 px so I dont know what Im doing wrong.

    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/rwd/smartphone-landscape.css" media="screen and (min-width : 480px) and (max-width : 800px)">

    Site here:

    http://public.kleeneze.co.uk/

    Help!!!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,595
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Rather than have a separate style sheet, you could try something like this in your main style sheet:

    Code:
    @media only screen and (min-device-width : 480px) and (max-device-width : 800px) {
    /* Styles here */
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Blackpool, UK
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah I tried a test style out using that method it worked fine, just changed the background green. It still doesnt explain my original media query isnt working though as all the styles I want to apply to this size are contained in this stylesheet. I want to maintain them in seperate stylesheets BTW, I did orginally have the media queries in one massive long CSS file but it became to unwieldy

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,595
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Seems to be hard to get these media queries right. Maybe try adding in the extra word "only":

    Code:
    media="only screen and (min-width : 480px) and (max-width : 800px)"

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Blackpool, UK
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How weird is this, the CSS reads the device size at 533px for some reason, same with the Desire HD Has something to do with ratio's according to this article

    http://stackoverflow.com/questions/1...e-9-7-10-works

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,595
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hm, this is a bit of a messy area. I knew the iPhone 4 had different dimensions, but the old settings still work for that. Thanks for the link. Hopefully this will all get easier one day!

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Blackpool, UK
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LOL yeah fingers crossed. Ive read this "idiots guide to Viewports and Media Queries' slideshow a few times over now and am starting to understand it a bit more now, check it out:

    https://docs.google.com/present/view...qtm_22dxsrgcf4

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,595
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Interesting link. Thanks for that.


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
  •