Media Query iPad problem
Amateur here trying to learn RWD and I've got an issue with targeting iPad's which is baffling me. I perhaps foolishly tried to convert the old 960 static grid to responsive as I thought it would be a better learning exercise than using a fluid grid framework, but I think that's causing issues in itself.
Scaling the browser on a desktop seems to work, as does viewing the site on an iPhone but when viewing the site on the iPad, it seems to pick up styling from a kind of 'limbo' between the desktop and iPhone queries.
Here's the link:
If you scale it down on the desktop, there's actually a moment where you can get the same effect, I'm assuming that's at 768px width. I can't work out what's going on so any help is appreciated.
Also, there appears to be a white bar down the right hand side of the screen when viewing on an iPhone or iPad. Any ideas?
Ok I think I've sorted the main problem. Any size between 480 and 768 was undefined and appeared to be a broken combination of both the iPhone and iPad styles.
It's still broken on the iPhone/iPad though. The alignment looks out and there's a white strip along the right-hand edge. Works fine in the desktop browser though.
Fixed it. The width percentage was wrong on the grid stylesheet.
All working now!