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?
