@media queries

[joliett89]

Does something like this is suppose to work?

@media screen and (max-width: 1225px)

body {
	width: 980px; 
	margin: 0 auto;
}

@media screen and (min-width: 1226px)

body {
	
	width: 1226px; 
	margin: 0 auto; 
}

Two fixed website sizes depending on the screen size... It looks like it doesnt work...

Thank you.

[tracknut]

You can, though your syntax is off:

@media only screen and (max-width: 1225px)
	{
	body {width:980px;margin:0 auto}
	}
@media screen and (min-width: 1226px)
	{
	body {width:1226px;margin:0 auto}
	}

I would do it slightly differently though:

body {width:1226px;margin:0 auto}
@media only screen and (max-width: 1225px)
	{
	body {width:980px}
	}
@media only screen and (max-width: 980px)
	{
	body {width:800px}
	}

I.e, set the body with in css for your largest view, then incrementally apply changes to the style(s) as the page gets smaller.

Dave

[joliett89]

I figured out why it was not working. I forgot media query brackets { }.