Desktop taking CSS properties written for Tablet!

HTML & CSS
1

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/testingCSS_on_multipledevices.html

Regards,
Shivanand

2

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:

@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

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

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

“It stays green for me at all sizes” - Are you resizing the browser or changing the Screen Resolution of the Operating System?

6

Resizing the browser.

7

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.

8

I see. I misunderstood you then. Well, you could override that effect for such smaller screens by adding the rule in red:

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}
}

[COLOR="#FF0000"]@media only screen and (min-width:480px) and (max-width:1024px)
{
	.dataContainer {background:#00ff00}
}[/COLOR]

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

Thanks!