I had an existing site I created using Blueprint CSS a while ago. I wanted to make it mobile-friendly. There are responsive CSS grid frameworks out there now, but I didn’t feel like replacing Blueprint, and I figured all I had to do was, using media queries, make every column span a fixed width. That was mostly correct. In the end, I used 100% widths, plus a few other alterations.  Here is how I ended up doing it.

Normally, you will link to your Blueprint screen.css file like so:

	<link href="/css/screen.css" rel="stylesheet" media="screen, projection" type="text/css" />

The following lines tell the browser to link first to a mobile-friendly CSS file. Then, if and when the width is 600px, link to the normal, desktop CSS file. The idea is that bandwidth is scarcer on mobile, so we don’t mind downloading two files on a desktop machine if we have to.

<!-- For mobile displays -->
	<link href="/css/mobile.css" rel="stylesheet" media="screen, projection" type="text/css" />
	<link href="/css/print.css" rel="stylesheet" media="print" type="text/css" />
 
<!-- For desktop displays -->
	<link href="/css/screen.css" rel="stylesheet" media="only screen and (min-width: 600px)" />

To create my mobile.css, I copied screen.css, and made the following changes.

  1. Change table elements padding to 2px 
    th, td, caption {padding: 2px;}
  2. Resize all image widths to fit on screen 
    a img {border:none;max-width:90%}
  3. Change input text fields to 67% width. 
    input.text, input.title {width: 67%; padding: 5px;}
  4. Change textarea inputs to 80% width, and reduce height to 150px. 
    textarea {width: 80%; height: 150px; padding: 5px;}
  5. Change the overall container to 90% width. 
    .container {width: 90%; margin: 0 auto;}
  6. Change all span grid classes to 100% width. 
    .span-1 {width: 100%;}
...
.span-24 {width: 100%; margin-right: 0;}
  7. For some reason, I ended up deleting all input.span and textarea.span classes, though I’m not sure why now.
  8. Change all append grid classes to 0px right padding. 
    .append-1 {padding-right: 0;}
...
.append-24 {padding-right: 0;}
  9. Change all prepend grid classes to 0px left padding. 
    .prepend-1 {padding-left: 0;}
...
.prepend-24 {padding-left: 0;}
  10. Change all pull grid classes to 0px left margin. 
    .pull-1 {margin-left: 0;}
...
.pull-24 {margin-left: 0;}
  11. Change all push grid classes to 0px margin. 
    .push-1 {margin: 0;}
...
.push-24 {margin: 0;}

Not pretty, but it seems to work well.  Happy CSS!