Jump to content

Understanding Media Queries


Recommended Posts

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) {
    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.

Link to comment
Share on other sites

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

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



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>

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.


Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

This thread is more than a year old. Are you sure you have something important to add to it?

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.