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