Responsive Freeway Pro Website using CSS3 Media Queries

I was interested about if it was possible to create a Responsive website using Freeway Pro so I created a template based on a Tutorial about CSS3 Media Queries over at Web Designer Wall. So as an exercise I’ve converted their example into a Freeway Pro file (available to download below) so you can dissect it and work out what is going on.

The template does not use any Freeway Actions however if you wish to make any suggestions how it could be improved using actions please leave a comment.

VIEW DEMO →

Download the Freeway Pro file

CSS2 allows you to specify stylesheet for print and screen. CSS3 allows for greater control by using Media Queries to check for certain conditions like screen widths for desktop and mobile devices.

Max Width

The following CSS will apply if the viewing area is smaller than 600px.

@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}

If you want to link to a separate stylesheet, put the following line of code in between the tag.

Min Width

The following CSS will apply if the viewing area is greater than 900px.

@media screen and (min-width: 900px) {
.class {
background: #666;
}
}

Multiple Media Queries

You can combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.

@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}

Device Width

The following code will apply if the max-device-width is 480px (eg. iPhone display). Note: max-device-width means the actual resolution of the device and max-width means the viewing area resolution.

@media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}

For iPhone 4

The following stylesheet is specifically for iPhone 4 (credits: Thomas Maier).

< link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" / >

For iPad

You can also use media query to detect orientation (portrait or landscapse) on the iPad (credits: Cloud Four).

< link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" >
< link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" >

Sample Sites

You need a browser that supports media queries such as Firefox, Chrome, and Safari. Go to each site and see how the layout responds base on the size (width) of your browser winow.

http://stuffandnonsense.co.uk
http://hicksdesign.co.uk