CodingForums.com - CSS If width...

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - CSS If width... (http://www.codingforums.com/showthread.php?t=282212)

MrTIMarshall

11-15-2012 03:04 AM

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

VIPStephan

11-15-2012 08:26 AM

It’s called media query.

MrTIMarshall

11-15-2012 11:44 AM

Thank you very much VIPStephan

MrTIMarshall

11-15-2012 12:08 PM

Code:

@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

11-15-2012 01:59 PM

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.

All times are GMT +1. The time now is 04:53 PM.