In this recipe, we will modify the seattle.master master page to hide the header controls and float all of the page elements to make them appear vertically stacked. This will allow users to view the site on mobile devices and only require the user to scroll vertically rather than both vertically and horizontally.

This recipe will only cover the basic aspects of making a responsive design master page friendlier to mobile devices. Additional styling and design would be required to provide a more complete mobile user experience.

Responsive designs are usually flexible, allowing pages to render well in various web browsers and are not limited to mobile browsers. Creating responsive designs is a good practice for all web browsers. In this recipe, however, we will focus on a responsive design geared at mobile browsers.