CSS If width...

[MrTIMarshall]

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

[VIPStephan]

It’s called media query.

[MrTIMarshall]

Thank you very much VIPStephan

[MrTIMarshall]

@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?

[VIPStephan]

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 on CF’s (former) sister site JavaScript Kit; and be sure to read part three, too.