Understanding Media Queries? Im a bit lost

HTML & CSS
1

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.

2

anyone have any advice? Im really looking for some help here as Im kind of stuck with this.

3

Not sure I understand why you would want to redraw the screen when a user resizes the window. Would seem to be a distraction to me. :slight_smile:

I generally design a site with a fluid width. Set a min-width and a max width on your container div.

That way you don’t have to use a separate style sheet and your website resizes nicely.

Of course this is only an assumption and I may be way off with what you’re trying to do.

4

Ok, found a little more info on this. Learn something new every day. :slight_smile:

Check this syntax


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

and this


@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
}

Not sure if you need the ‘only’ in there?

5

yeah thats where I got the basic gist of what Im trying to do. The only thing is that I am implementing it and it isnt working for me. Im thinking im doing something wrong or not interpreting something clearly.

6

when I view source or view it in firebug the 600.css styles are there.

7

Does the page actually change though?

8

You have two errors.:slight_smile:

First you have put the alternative styles first and so the normal rules just over-ride them.

second you have an extra comma on the list of styles which kills them all.


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

After welcome you have a comma that needs to be removed.

Just move the specific styles to the end of the cascade and then they will over-ride the normal rules.

You should also removed position fixed for mobile devices as they don’t like it.

9

Yes iPhone cannot do position fixed. And has no scroll bars apparent. So basically I’m one of the only ones that know how to scroll a fixed container. Fixed popups open at the top of the window. Even if your ten feet down near the bottom. Once again. I’m one of the only few to know to go look for it at the top.

10

Yes the only scrollbars on the iphone are on the main window. On other containers with a scroll nothing will appear and you won’t probably know you have to scroll - which you can do with two finger scrolling (and I don’t even have an iphone :)).

11

Hey guys, Im still having a hard time with this. I made the fixes listed above here is my regular style sheet. I added the alternate styles to the end:

/*RESET*/  

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}

/*END RESET*/



body { 
   
   background-image:url('../images/back_one.jpg');
   background-repeat:repeat-y;




}


#container {
width:960px;
overflow:hidden;
margin-right:auto;
margin-left:auto;
position:relative; 

z-index:1;
}
#container #header{
	width:960px;
	height:934px;
	padding-bottom:50px;
	border-bottom: 1px dashed #00c0ff;
	background-image:url('../images/header_back.png');
	background-repeat:no-repeat;
	background-position: top center;
	
	 
}
#container #header img {
	max-width:100%; 
   
} 

#container #intro{
	width:960px;
	float:left;
	margin-bottom:25px;
	border-bottom: 1px dashed #00c0ff; 
   
	
} 
#container #intro #welcome{
	width:625px;
	float:left;
	background-color:#0a475b;
	height:300px;
}
#container #intro #links{
	float:right;
	width:330px;
	margin-left:5px;
	background-color:#0a475b;
	height:300px;
	
}
#container #folio{
	width:960px;
	float:left;
	border-bottom: 1px dashed #00c0ff;  
	padding-bottom:25px; 
	
   
	
} 
#container #folio .portfolio_piece{
	background-color:#0a475b;
	float:left;
	width:310px;
	height:218px;
	text-align:center;
	margin:3px;
	border: 1px solid #00c0ff;
	cursor:pointer;
	
	
}  
#container #folio .portfolio_piece:hover{ 
	border: 1px solid #fff;
	
}


#container #social{
	width:960px;
	float:left;
    border-bottom: 1px dashed #00c0ff;  
	
	margin-bottom:100px; 
	position:relative;
	
   
	
}
#container #social #twitter{
	float:left;
	height:300px;
	width:479px;
   	border-right: 1px dashed #00c0ff
	
}
#container #social #promise{
	float:right;
	width:480px;
	height:300px;
	
   
	
	
}

#container #floating_footer{ 
	position:fixed;
	left:0;
	bottom:0;
	
	height:50px;
	width:100%;
	background-color:#00c0ff;
	z-index:1; 
   
	
}
@media screen(max-width: 600px) {
  #container,
  #header,
  #info,
  #folio,
  #links,
  #welcome
 {
    float: none;
    width: 100px;
  }
}

From this, when I make my browser smaller should everything not jump to 100px wide and smaller? AT this point I am just looking to make something happen as I reduce the browser window. If I can figure that out, I can prob figure out the rest. Right now, the CSS above is just not working for some reason. Any ideas?

12

You missed out the "and "this time lol :slight_smile:

See if you can see where?

13

here’s something that you can see is working.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
    background:green
}
@media screen and (max-width: 600px) {
 body
 {
    background:red
  }
}

</style>
</head>

<body>
</body>
</html>
14

Paul, THANK YOU! That example got me moving where I need to be. I dont know why it wasnt working earlier, but I used your example and messed with some of the elements on the site and its looking like I need it to. Thank you!