Hi there,
Working on this site Professional Video Production and Photography and I’ve got it working at 1280 and 720px size screens. I’ve linked a 480px stylesheet the same as the 720px one, but it is being ignored completely and I can’t figure out why.
Would someone be kind enough to take a look and help me get it working, please.
Thanks as always
P.S. Great music videos to tempt you with!
Okay, hope you enjoyed the music.
The problem was that I was trying to test the results in the same browser window…re-sizing using the Web Developer Toolbar and of course, it only responds to the main.css stylesheet.
I sorted it by creating the individual stylesheets as if they were the main stylesheet and then changing the code to:
(Html5)
<link rel="stylesheet"media="only screen and (max-device-width: 720px)"href="css/main_720.css">
<link rel="stylesheet"media="only screen and (max-device-width: 480px)"href="css/main_480.css">
Not posessing either an ipad or an iphone I had to make a couple of phonecalls to get it checked and it seems to be fine.
I hope this helps anyone who is trying to write for different devices and sizes and thinks that the code can be tested in the browsers on just one machine. It can’t unfortunately.
Best wishes
Hi glad you sorted it 
You can test in one browser if you use @media queries in the one css file. This example will change layout 4 times if you just resize the window.