Responsive responsivedesign code howto css ui mobile ideas

Quick retrofit responsive CSS

Google has been hassling site owners for months now about making their sites responsive and mobile-friendly. The two things aren't the same but the big G doesn't care, so I finally caved in to their nagging and jumped on the site to change the CSS.

This site always had a very simple stylesheet and a really basic structure, which lends itself to responsive design. Since the default width of the content is set to 680 pixels, and the widths are only defined in a few places, it was a snap to jump into the CSS and add a media query so that anything with a display resolution of more than 680 pixels wide gets the original versions of the rules, and the rest get a new version with a reduced width, in this case 340 pixels.

Throw in a few extra rules to reduce padding and margins for the smaller display, and another two to handle a couple of fixed width objects. All done in ten minutes and Google can stop calling me.

  • -->
  • -->