CSS If width...

Hello,

I have forgotten how to implement the code in the css to display things differently on the width...

I know it starts with '@..... {' and then you close the bracket and add the css in the center for the specified screen size...

When I research it I keep getting Javascript ways and whatnot, I just want the basic CSS way...

Best Regards,
Tim

It’s called media query (http://css-tricks.com/css-media-queries/).

Thank you very much VIPStephan

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
body {
background: #ccc;
}
}

So an iPhone is 320x480, what do I do so it has a different layout based on an exact width?

Edit: Oh and does anything else need to be implemented for those phones with tilting software on, I presume just another width?

There is not only min-width as query, there is also width and [min-|max-]device-width, and orientation mode (portrait/landscape) among many others. Have a look at this three-part tutorial (http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml) on CF’s (former) sister site JavaScript Kit; and be sure to read part three, too.