Media Query query

[ornette]

Hi,
I'm building this site:
http://www.eftharmony.co.uk/

At first I was using '@media only' for the changes in size/layout, but they didn't work.
I changed them to '<link rel ...>' with only the changes in layout in each stylesheet. This didn't work either.
So in the end I've put the whole stylesheet in '<link rel ...>' and this doesn't work.
I've changed the order of the stylesheets and always the bottom one is the only one that seems to work (at least the cascade works).
Can some of you clever people have a look and tell me what's wrong, please, while I've got some hair left.
Thanks as always
Ornette

[ralph.m]

Yes, each browser is reading each CSS file, and so only the last will apply. Instead of this:

<link rel="stylesheet" type="text/css" href="css/1280.css">
<link rel="stylesheet" type="text/css" href="css/800.css">
<link rel="stylesheet" type="text/css" href="css/480.css">

you need something like this:

<link rel="stylesheet" type="text/css" href="css/1280.css" media="screen and (min-width:801px)">
<link rel="stylesheet" type="text/css" href="css/800.css" media="screen and (min-width: 481px) and (max-width:800px)">
<link rel="stylesheet" type="text/css" href="css/480.css" media="screen and (max-width:480px)">

That way, you tell browsers when to use each style sheet.

The only problem with this is that some older browsers (including IE8) may not load anything, so usually you'd set one of those sheets as the default, without any media rules. E.g.

<link rel="stylesheet" type="text/css" href="css/1280.css">
<link rel="stylesheet" type="text/css" href="css/800.css" media="screen and (min-width: 481px) and (max-width:800px)">
<link rel="stylesheet" type="text/css" href="css/480.css" media="screen and (max-width:480px)">

[ornette]

Brilliant, thanks so much. A few adjustments to the css and home and dry.
Is it right to say that using '@media only' you have to add the 'media".." and (min-width ..)' etc. as well to get it to work?

[ralph.m]

I don't quite understand your question, but I do find this @media syntax a bit confusing, so I often have to mess with it a bit. I haven't actually used media rules this way, personally. I would normally have one style sheet with code marked off for different screen sizes inside that, such as

@media only screen and (min-width: 800px) {
	styles here
}

@media only screen and (min-width: 481px) and (max-width: 800px) {
	styles here
}

@media only screen and (max-width: 480px) {
	styles here
}

One other thing you should do when using @media rules is place this in the head of your HTML pages:

<meta name="viewport" content="width=device-width">

[ornette]

I think you understood what I was trying to ask and have answered it well for me.
Interesting about the meta tag in the head. I'll do some more experimenting with it now that you have cleared up my confusion.
Extremely grateful for your assistance Ralph.