Wednesday, 18 September 2013

Media queries on Kindle Fire landscape mode vs. iPad query in landscape mode

Media queries on Kindle Fire landscape mode vs. iPad query in landscape mode

I'm new to web development and responsive design, so this might be an
idiotic question. Unfortunately, I have searched and searched and cannot
find an answer.
When I write a media query for Kindle Fire landscape, it effects the iPad
landscape and vice versa. I cannot separate them. I have tried many things
and nothing works.I don't have a problem in portrait mode or with other
devices. I assume this is a problem here because the resolutions overlap,
but I thought the code below would make them mutually exclusive. It
doesn't.
Kindle landscape
@media screen and (min-width: 600px) and (max-width: 1024px){ #help{color:
red;}}
iPad landscape
@media screen and (min-width: 768px) and (max-width: 1024px){/default
color is white for desktop version so I don't specify the color in this
query/ }}
The code above will make iPad #help red. If I reverse the order and put
iPad first and Kindle second, then #help is white in Kindle.
And this code below makes the iPad landscape look fine, but Kindle is all
broken.
@media screen and (max-width: 1024px){ /code/;}}
What am I doing wrong??? How do I write code so that I can make my website
look right on Kindle without messing up the iPad? Do I need something
else, like javascript?

No comments:

Post a Comment