0

I've inherited a Drupal 6 project with a custom theme based off fusion. I would like to keep the current design for screen sizes above 800. Should I wrap existing CSS in @media screen and (min-width:800px)? Or, might I be able to use a "reset" technique under another media query?

How would you retro fit media queries into an existing site?

0

Got it. Basically we're moving ['all'] to ['(min-width: 720px)'] in the array structure. When it's loaded back in all of the stylesheets are effectively now wrapped into a media query.

function hook_preprocess_page(&$vars) {
  // get style sheet array
  $css = $vars['css'];

  // copy over the [all] to a media query key
  $css['(min-width: 720px)'] = $css['all'];

  // Remove the all
  unset($css['all']);


  $vars['styles'] = drupal_get_css($css);
 }

This leaves us the ability to define other style sheets in theme.info for other breakpoints.

stylesheets['(max-width: 480px)'][] = phone.css

Update, I turned this into a larger structure to let my content maintainers pick where the breakpoint should be.

A small idea for an add-on. I had an issue with a recent Drupal 6 site that I was trying to make responsive. I got tired of trying to override CSS from various areas so I wrote the following hook_preprocess_page to move stylesheets from [all] and move them to a logical break point. By doing this I can retro fit a mobile stylesheet into

A small idea for an add-on. I had an issue with a recent Drupal 6 site that I was trying to make responsive. I got tired of trying to override CSS from various areas so I wrote the following hook_preprocess_page to move stylesheets from [all] and move them to a logical break point. By doing this I can retro fit a mobile stylesheet into

/*
 * Implemntation of hook_preprocess_page
 *
 * Takes CSS files from the $vars['css']['all'] and moves them to $vars['css'][$breakpoint]. In effect, this moves all
 * existing stylesheets into a media query that you can specifiy. By default it's 480px. 
 */ 
function wrapcss_preprocess_page(&$vars) {

  $css          = $vars['css'];
  $pixel_break  = (int) variable_get('wrapcss_breakpoint', '480');


  // Ensure that we have a value and that value is numeric
  if (isset($pixel_break) && is_numeric($pixel_break))
  {
    $breakpoint   = '(min-width: ' . $pixel_break . 'px)';
  } 
  // If not, just default to 480
  else 
  {
    $breakpoint   = '(min-width: 480px)';
  }

  // copy [all] to [breakpoint]
  $css["$breakpoint"] = $css['all'];

  // Remove stylesheets from [all]
  unset($css['all']);

  // Import back in 
  $vars['styles'] = drupal_get_css($css);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.