MSN Olympic Games | Examples | Responsive Web Design

MSN Olympic Games

MSN Olympic Responsive Design
MSN Olympic Games across four different breakpoints

View MSN Olympic Games

The MSN Olympic site mainly focusses on the tablet and mobile devices but also works perfectly fine across the desktop as well. While it doesn’t look bad on the desktop we feel that is looks a little lonely at the larger view ports.

To get a complete overview of how this site was constructed you should check out the .net magazine article which describes the build process from brief to golive.

Although a great site it has been featured in the print shame blog (which is a bit harsh, but does raises the point that printers are devices as well.

MSN Olympic Games Technical Details

Site Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1.0;  maximum-scale=1; minimum-scale=1; user-scalable=no;">

Media Queries

@media only screen and (min-width: 440px) { }

@media only screen and (min-width: 579px) { }

@media screen and (min-width: 579px) { }

@media only screen and (min-width: 579px) { }

@media only screen and (min-width: 768px) { }

@media only screen and (min-width: 1024px){ }

Plugins used on MSN Olympic Games

Subscribe to our Newsletter

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