SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Desktop taking CSS properties written for Tablet!

    Hello,

    I have written a separate CSS using media queries for tablet device:
    @media screen and (min-device-width:480px) and (max-device-width:1024px)
    {
    .dataContainer{background-color:#ff0000}
    }

    For Desktops the CSS is:
    .dataContainer{background-color:#00ff00;}


    The problem I am facing is when I access the page on desktop with a resolution of 1024x768, it is taking media queries css written for the tablet. For resolutions above 1024 it is not applying the CSS wrtten for Tablet. How can I have the Desktop CSS get applied to the page at 1024 resolution. YOur help is highly appreciated. Here is the URL of the page:
    http://shivanand.in/temp/Panterra/te...ledevices.html

    Regards,
    Shivanand

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi Shivanand,

    It's not quite clear what you are asking here. For me, in firefox at least, those @media styles don't apply (the div stays green). If you do want those styles to apply (the background to go red between those widths) then add this CSS:

    Code:
    @media only screen and (min-width:480px) and (max-width:1024px)
    {
    	.dataContainer {background:#ff0000}
    }
    But it's not clear what you want to happen when the desktop browser is between 480 and 1024 px. If you are seeing red (ha ha!), what browser are you viewing this in?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for quick reply, Ralph.

    Browser used: firefox 6.0.2.
    When my desktop browser is between 480 and 1024 px I am seeing Red background. Actually I would like to see Green because Red is written for Tablets. Hope I am clear.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    That's weird. It stays green for me at all sizes, but I just upgraded to FF7 about an hour ago!

    EDIT: just tested FF6 and FF3 on Windows, and in both the div stays green at all widths.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "It stays green for me at all sizes" - Are you resizing the browser or changing the Screen Resolution of the Operating System?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Shivanand View Post
    Are you resizing the browser or changing the Screen Resolution of the Operating System?
    Resizing the browser.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am changing the screen resolution. On 1024 x 768 screen resolution it is taking red color. Actually I would like to see Green because Red is written for Tablet. Attaching the screenshot.
    Screen_resolution.png

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Shivanand View Post
    I am changing the screen resolution.
    I see. I misunderstood you then. Well, you could override that effect for such smaller screens by adding the rule in red:

    Code:
    body {font-family:Arial, Helvetica, sans-serif}
    
    .dataContainer {background:#00ff00;height:200px;padding:20px}
    
    @media only screen and (min-device-width:480px) and (max-device-width:1024px)
    {
    	.dataContainer {background:#ff0000}
    }
    
    @media only screen and (min-width:480px) and (max-width:1024px)
    {
    	.dataContainer {background:#00ff00}
    }
    Mind you, not a lot of desktops use that resolution any more. (I think it was as few as 14% last time I checked.)

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
  •