media query for new ipod touch 5th gen is failing

Question

Problem Description

i'm trying to figure out the width of the new ipod touch units. My css media queries are failing on the device... the logo that is appear is huge.

I've tried to google this and found some articles like: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

But nothing I've tried so far works.

Code:

Here's the media query I was expecting would work:

@media only screen and (max-width: 220px), only screen and (max-device-width: 480px) {}

What I've tried so far:

Besides playing with max-width values ranging from 200 to 480, I've also tried to use the responsive web design tool in firefox. When I change the size of my view to 320 x 480 using this tool, the correct logo appears. But when I use my ipod to test the site, i get a different sized logo.

I've also changed the query so it looks like:

@media (min-width: 320px) and (max-width: 480px) {

or

@media only screen and (max-device-width: 480px) {

Additional Questions

How do you properly test for caching issues? I've tried to make sure that on my desktop, I always do a CTRL+F5 to refresh the page, but I don't know how to do that on my ipod. Could that be the issue?

I'm not sure what I'm doing wrong. Any suggestions would be appreciated. Thanks!

Answer 1

I added the !important keyword after the logo that's not being loaded and now it works. So it looks like I have a problem with specificity. Going to hunt that down