View Full Version : CSS If width...

11-15-2012, 04:04 AM

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,

11-15-2012, 09:26 AM
It’s called media query (http://css-tricks.com/css-media-queries/).

11-15-2012, 12:44 PM
Thank you very much VIPStephan

11-15-2012, 01:08 PM
@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?

11-15-2012, 02: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 (http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml) on CF’s (former) sister site JavaScript Kit; and be sure to read part three, too.