Understanding Media Queries

[renegade44]

Hey guys, I am doing some stuff lately that I havent ever touched. Im doing a responsive layout and I am having a ahrd time understanding all of this @ media query stuff. Hopefully someone can help me out.

 

Basically I have a basic site laid out here: http://www.glenhealy.com/clients/AArdvark_Future/

 

I have 1 css file as the main file. I then used this code here:

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 600px)"
  href="css/600.css" /> 

 

to link a new stylesheet for browsers under 600px wide.

 

Inside that CSS file I included this code here:

@media screen and (max-width: 600px) {
  #container,
  #header,
  #info,
  #folio,
  #links,
  #welcome,
{
    float: none;
    width: auto;
  }
}    

 

 

 

nothing happens with this. I view the site in firebug and it has 600.css as being empty. I am obviously doing something wrong, but hey, its my first time messing with this. I do need some help.

 

 

My ultimate goal is to just have the site change as you open or close the window making it bigger or smaller.

 

 

thanks in advance.

 

 

Also let me know if more info is necessary.

[cssfreakie]

I could be totally wrong, but why use the @ sign in your css?

use a different <link> 's for different purposes:

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.glenhealy.com%2Fclients%2FAArdvark_Future%2F&profile=css21&usermedium=all&warning=1&lang=en

 

besides that min-width / max-width are valid.

let javascript figure out the browser width and apply/include css on the fly. don't forget a <noscript>

[renegade44]

well, Im using this based on a method of getting the site to resize when the browser is adjusted. I am having a hard time getting it to work so I needed some help, Ive never messed with javascript making this work, but Im not interested either, I need this method to work specifically based on what I am doing. Any idea on how to do this?

[cssfreakie]

nope sorry i can't see how to do this valid without javascript, as allready mentioned. min-width and max-width are valid ways. IF you have a fluid designthat would be the way to go. otherwise use javascript

 

here is a discussion ending up in the exact same.

http://www.webmasterworld.com/forum83/134.htm

[renegade44]

hey css, check out this link here: http://www.glenhealy.com/clients/AArdvark_Future/

 

I was able to get it working, not 100% but if you shrink the browser you can see it change. this is no JS,just css.

[cssfreakie]

hey css, check out this link here: http://www.glenhealy.com/clients/AArdvark_Future/

 

I was able to get it working, not 100% but if you shrink the browser you can see it change. this is no JS,just css.

 

Ah yes with percentages you can do that yes, you ned to set a parent width and height than. hehe i misunderstood you i think, i thought you wanted some sort of conditional css. gladj you worked it out