---
title: "This Theme Is Now Responsive"
date: 2012-08-09
description: "$( document ).ready(function() { // Handler for .ready() called. $("
canonical_url: https://idratherbewriting.com/2012/08/09/this-theme-is-now-responsive/
---
# This Theme Is Now Responsive
[![](https://s3.us-west-1.wasabisys.com/idbwmedia.com/images/navthumb.png)](https://s3.us-west-1.wasabisys.com/idbwmedia.com/images/2012/08/navthumb.png)Previously, I've used WordPress plugins to style this blog's view on mobile devices, but with all the buzz about multi-device display and publishing, I decided to switch themes to a completely responsive theme.

Because I use minimalistic themes, switching from one minimalistic theme to another is almost unnoticeable. But so you can see the difference, resize your browser to a smaller size. As you resize it, you'll see the navigate bar suddenly switch to another style. On your mobile device, the text will still be readable. You can read the content on mobile, tablet, and desktop computers. Even the print looks good (hit Ctrl+P).

I didn't manually style the theme. I'm using [Canvas](http://www.woothemes.com/2012/06/canvas/), a theme from Woothemes. Canvas is more like a minimalistic, responsive theme framework than anything else. Hands-down it is the most popular and flexible theme from Woothemes, and with all the responsive styling built-right in, it's a good choice for a blog theme.

Interestingly, the main stylesheet for Canvas defines the mobile display. An additional stylesheet, layout.css, makes adjustments for a desktop display. In other words, the designers prioritized mobile first, rather than adjusting for mobile after designing for a desktop display.

In the layout.css stylesheet, you'll see various media queries. These media queries tell browsers to style the content a certain way for specific device sizes:

> [@media](https://github.com/media) only screen and (max-width: 1000px)
> [@media](https://github.com/media) only screen and (max-width: 768px)
> [@media](https://github.com/media) only screen and (min-width: 768px)

That third media query targets the desktop display, and if you look at the styles, you'll see about 50 styles in that section, compared to only about 5 styles in the previous two sections.