Pelicanfly across four different breakpoints

View Pelicanfly

Pelicanfly uses an SVG logo once you get down to the mobile version of the site ( to ensure that it looks sharp even on retina display devices.

The circle images on the site change the opacity of the top image to 0 to go from b&w to colour, although perhaps using filter:grayscale(100%); and a CSS3 transition would allow for less images downloaded.

Finally, although there are a few media queries as you can see below, there is some case statements within the javascript ( which also assist in changing the styles applied to the site.

Pelicanfly Technical Details

Site Meta Tag

<meta name="viewport" content=" initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Media Queries

/* ---- 13 Column - 1068px ----------- */
@media only screen and (min-width: 1068px) {

/* ---- 9 Column - 732px ----------- */
@media only screen and (max-width: 1067px) {

/* ---- 6 Column - 480px ---------- */
@media only screen and (max-width: 731px) and (min-width: 480px) {

/* ---- 3 Column - 480px ---------- */
@media only screen and (max-width: 480px) {

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.