How to make page responsive with minimal CSS

You have a theme was originally designed for desktop, it looks all well on desktop, but when you open it in your cellphone, you find it's ugly, uncomfortable, unusable, but you don't want to start it over and redesign the whole theme to make it responsive or introduce a responsive framework and recreate it, that would take way too much work, you want to add as little as possible CSS rules to make it mobile friendly without touch the existing things. You want to extend it, not to modify it.

First add this prologue to your head element

  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Set up media screen

All CSS style in media query will be applied when the page is displayed in mobile device. If you don't know how to set media query, here is the rule of thumb setup

@media only screen and (max-width: 730px) {}

This include most tablets and cellphones, you can put all you responsive code here.

Make image responsive

To make images responsive means to display the images with the width zoom according to the width of the screen, the following CSS code will makes the image responsive:

.columns-inner p a img {
max-width: 100%;
height: auto;
width: auto\9; /* IE8 */

The images will be displayed as below:

Lossen up the width and disable float

The second step is to set all the hard encoded width of elements to 100%. In mobile devices, wdith is almost useless, the screen width is the only valid width you can use.

You also should disable float, in mobile, one column rule them all. There are no room for two columns.

The most frequently used CSS style should be

width: 100%;
float: none;

Left align the text

In desktop, center align your content may looks great, but in mobile it will be nightmare, change them to center if you have center aligned text.

After those steps, your theme should gain enough responsiveness for most users. There may be other issues you need to tweak for example, the margin and padding should be smaller on mobile devices compared to the desktop. You should adjust them accordingly.