How to add a media type to drupal_add_css in custom module

Question

I’ve got a question about adding CSS to a custom module.

Originally I’ve been given this line:

link rel="stylesheet" type="text/css" media="screen and (max-width: 640px)"    href="mobile.css"

And I’ve converted it into:

drupal_add_css(drupal_get_path('module', 'savingsscore') . '/css/mobile.css', 'screen and          (max-width: 640px');

The file is being attached, but the media setting is wrong and I don’t know what it should be. I’m in Drupal 6.

Thanks!

before delving into this further, can you let us know what media setting/actual css link it is generating in error? reason I ask is you have either something really obviously wrong or just a cut and paste glitch in your question above.
It wasn't generating an error per se. But instead the css was still effecting screens beyond 640px in width

Jimajamma · Accepted Answer · 2013-02-14 03:03:23Z

drupal_add_css() is defined as:

drupal_add_css($path = NULL, $type = 'module', $media = 'all', $preprocess = TRUE)

and in your example, you are doing:

drupal_add_css(drupal_get_path('module', 'savingsscore') . '/css/mobile.css', 'screen and          (max-width: 640px');

which appears to have two problems:

I'd suggest trying:

drupal_add_css(drupal_get_path('module', 'savingsscore') . '/css/mobile.css', 'module', 'screen and (max-width: 640px)');

and seeing it that fixes things up.

KyleTaylored · Answer 2 · 2013-02-14 02:38:26Z

up vote 0 down vote

Why not put the media query inside your style sheet?

Wrap everything in:

@media only screen and (max-device-width: 640px) {
  /* Contents of mobile.css goes here. */
}

answered Feb 14 at 2:38

KyleTaylored
4118

add comment (requires an account with 50 reputation)

2 Answers