Round Rock / Austin, Texas
Drupal Web Developer

Mobile Web Development

How to Flip Floating Divs Top and Bottom for Responsive

For responsive layouts, sometimes you want to change the natural order of the floating divs to stack themselves from bottom to top instead of top to bottom.

Here's an example of where I did this for a Contact Us page that had a sidebar.  I wanted the sidebar at the top and the contact us form at the bottom.

Responsive column stacking
View Article

Using a Super Easy and Lightweight Responsive Framework for a Drupal 7 Theme

As much as I love Bootstrap I don't always need all the fany stuff it provides, especailly since I use it as basic framework for custom Drupal 7 themes. 

Today I found a great solution that helped me convert an old site from non-responsive to responsive in about 2 hours!  Even bigger bonus is it's very lightweight!

I used Graham Miller's Responsive Grid System



Here are the steps I took to convert my Drupal 7 to be responsive:

1) Download css files from

960 grid 1024 grid responsive design
View Article

How to add the Viewport metatag for Drupal 7 sites

If you want your site to be responsive and mobile friendly, the Viewport metatag must be included in the <head> tag of your html.

To do this in Drupal 7, in your theme's template.php file add this code:


function YOURTHEMENAME_preprocess_html(&$vars) {
  $viewport = array(
   '#tag' => 'meta',
   '#attributes' => array(
     'name' => 'viewport',
     'content' => 'width=device-width, initial-scale=1, maximum-scale=1',
  drupal_add_html_head($viewport, 'viewport');

View Article

If Your iPhone is Ignoring Your Responsive CSS Media Queries

Make sure this is in the head tag to make sure that phones and mobile devices are looking at your css media queries!

Make phone see media query
View Article