Summary

We've finally had a chance to delve into our theme's code and start making it responsive. So, what did we learn about the responsive design? We learned that the responsive design requires three things—a fluid layout, media queries, and a meta tag telling mobile devices to work with their actual screen width and not the default of 1024px.

Fluid layouts are built by replacing pixel-based widths with percentage widths. These then make the site resize itself when the browser window is resized.

Media queries can be set for a variety of screen widths to target different devices in different orientations, using @media screen and (max-width=[device width]).

The CSS cascade means that styles we set for our main site will also apply to other screen widths unless we specifically set styles within a media query. It also means that styling set for a media query will apply to devices targeted by media queries further down in the stylesheet. When editing a stylesheet for an existing site, this means...