Drupal Web Design 

Delaware Web Design & Drupal eCommerce Websites

Does your website display on all mobile devices correctly?

Drupal 7 Adding Custom CSS for Targeting Mobile Devices

Drupal 7 Adding Custom CSS for iPhones iPads & Mobile Devices

Updated: October 10th, 2017

This tutorial has been completely redone to do it the right way and "The Drupal Way" Although the old tutorial worked for iPhones, using the aspect ratios also effected other devices of similar screen ratios. These methods will also work on Drupal 6 sites.

October 10th, 2017 Removed: -webkit-min-device-pixel-ratios to pass CSS validation and added Google Nexus media queries.

Drupal websites tutorial to specifically target mobile devices with CSS media queries for iPhones, iPads and Galaxy S5. This includes all iPhones 4 through iPhone 7 Plus in both landscape and portrait views. It is best implemented on Drupal themes that are not 100% mobile device friendly and or, you have created custom themes, regions within your theme or, added custom blocks that to not quite display as you would like them to on all mobile devices and in both portrait and landscape modes.

 

This CSS tutorial is geared towards moderate to advanced Drupal developers, themers and CSS editors. You should have a good knowledge of Drupal and a good vocabulary of CSS to take advantage of this tutorial.

*Note: These techniques can be used on other CMS's and static websites but, you will have to put the code that links your CSS file (<link media="only screen and... ) in between the <head> and </head> section of your pages.

Making themes Responsive using CSS by targeting each device's specific screen size, and aspect ratios individually!

Enjoy and have fun!

In this tutorial we will be focusing on the following:

  1. Creating a mobile.css file. For iPhones and Galaxy S5's.
  2. Linking the mobile.css file to your themes .info file.
  3. Creating a ipad.css file. For iPads.
  4. Linking the ipad.css file to your themes .info file.
  5. Testing and editing CSS off site and saving edits to your production site.

 

Creating a iPhone and Mobile Devices Specific CSS File

 

  1. The first thing is to create an css directory in you Drupal theme folder. Create an empty folder/directory named "css" within your Drupal sites theme directory. Example: sites\all\themes\YOURTHMEME\css
    (Note: Drupal recommends that you do not create this folder more than one level down from yout themes main directory!)
  2. Create a plain text .css file with a text editor like Notepad or the preferred Notepad++ and name it: mobile.css
  3. Copy and paste the following into the mobile.css file:

/* iPhone 4 Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 320px) and (orientation: portrait) {
/* Styles */
}
/* iPhone 4 Landscape */
@media only screen and (min-device-width: 480px) and (max-device-width: 480px) and (orientation: landscape) {
/* Styles */
}
/* iPhone 5 Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
/* Styles */
}
/* iPhone 5 Landscape */
@media only screen and (min-device-width: 568px) and (max-device-width: 568px) and (orientation: landscape) {
/* Styles */
}
/* iPhone 6 Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 375px) and (orientation : portrait) {
/* Styles */
}
/* iPhone 6 Landscape */
@media only screen and (min-device-width: 667px) and (max-device-width: 667px) and (orientation: landscape) {
/* Styles */
}
/* iPhone 6 Plus, 7 & 7 Plus Portrait */
@media only screen and (min-device-width: 414px) and (max-device-width: 414px) and (orientation: portrait) {
/* Styles */
}
/* iPhone 6 Plus, 7 & 7 Plus Landscape */
@media only screen and (min-device-width:736px) and (max-device-width:736px) and (orientation:landscape) {
/* Styles */
}

/* Galaxy S5 Portrait */
@media screen and (min-device-width: 360px) and (max-device-width: 360px) and (orientation: portrait) {
/* Styles */
}
/* Galaxy S5 Landscape */
@media screen and (min-device-width: 640px) and (max-device-width: 640px) and (orientation: landscape) {
/* Styles */
}

/* Google Nexus 4 Portrait */
@media screen and (min-device-width: 384px) and (max-device-width: 384px) and (orientation: portrait) {
/* Styles */
}
/* Google Nexus 4 Landscape */
@media screen and (min-device-width: 640px) and (max-device-width: 380px) and (orientation: landscape) {
/* Styles */
}
/* Google Nexus 5 Portrait NOTE: (min-device-width: 360px) and (max-device-width: 360px)
Same as Galaxy S5 Portrait Be careful of overrides! */
@media screen and (min-device-width: 360px) and (max-device-width: 360px) and (orientation: portrait) {
/* Styles */
}
/* Google Nexus 5 Landscape NOTE: (min-device-width: 640px) and (max-device-width: 640px)
Same as Galaxy S5 Landscape & Google Nexus 4 Landscape. Be careful of overrides! */
@media screen and (min-device-width: 640px) and (max-device-width: 640px) and (orientation: landscape) {
/* Styles */
}
/* Google Nexus 6 Portrait */
@media screen and (min-device-width: 412px) and (max-device-width: 412px) and (orientation: portrait) {
/* Styles */
}
/* Google Nexus 6 Landscape */
@media screen and (min-device-width: 732px) and (max-device-width: 732px) and (orientation: landscape) {
/* Styles */
}
/* Google Nexus 7 Portrait */
@media screen and (min-device-width: 600px) and (max-device-width: 600px) and (orientation: portrait) {
/* Styles */
}
/* Google Nexus 7 Landscape */
@media screen and (min-device-width: 960px) and (max-device-width: 960px) and (orientation: landscape) {
/* Styles */
}

For more information and devices on this subject see: Media Queries for Standard Devices by Chris Coyier.

 

Linking your mobile.css File to your Drupal Theme

 

  1. Open your themes .info file in a plain text editor. You will most likely find it in: sites\all\themes\YOURTHEME.info.
  2. Copy the Stylesheets Media Link below and paste it directly under "stylesheets[screen][]= style.css".
  3. Go to your site and flush all caches.

Note: "YOURTHEME" will be your sites themes name.

Stylesheets Media Link:

stylesheets[only screen and (min-device-width: 320px) and (max-device-width: 960px)][] = css/mobile.css

Note: Change "YOURSITE.com" to your domain name and make any changes to the "href" path as deemed necessary. The sample above is for a Drupal multisite setup with our CSS media files in our files/assets directory.

 

Creating an iPad Specific CSS File

 

  1. Create a plain text .css file with a text editor like Notepad or the preferred Notepad++ and name it: ipad.css
  2. Copy and paste the following into the mobile.css file.
  3. Save it in your sites\all\themes\css directory.

/* iPad (portrait) */
@media only screen and (min-device-width: 768px) and (max-device-width: 768px) and (orientation: portrait) {
/* Styles */
}

/* iPad (landscape) */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: landscape) {
/* Styles */
}

 

Linking your iPad.css File to your Drupal Theme

 

  1. Open your themes .info file in a plain text editor. You will most likely find it in: sites\all\themes\YOURTHEME.info.
  2. Copy the Stylesheets Media Link below and paste it directly under "stylesheets[screen][]= style.css".
  3. Go to your site and flush all caches.

 

Stylesheets Media Link:

stylesheets[only screen and (min-device-width: 768px) and (max-device-width: 1024px)][] = css/ipad.css

 

 

Testing and Editing your CSS file with Google Chrome Inspector

Note: Safari, Firefox and Internet Explorer all have similar development tools!

 

The Google chrole Code Inspector
The Google Chrome Developer Tools Code Inspector (F12)

 

  1. Open your site with the Google Chrome browser and either right click over an area that you want to inspect and hit "Inspector" or, with key strokes Ctrl+ Shift+ I or, (F12).
  2. Click the Toggle device mode icon on the upper left or, use key strokes (Ctrl + Shift + M).
  3. Refresh the browser (Ctrl + R).
  4. You can right click over any area that you want to inspect and hit "Inspector".
  5. You can test and make adjustments by clicking on any piece of HTML code in the left panel. This will display the CSS that effects that bit of code.
  6. After making some satisfactory changes to your CSS, you can either copy the rules individually and apply them to your CSS files or, click the link to your mobile.css file in the left inspector panel and it will load the file in the Sources panel. To save your edits, right click and select save as... Find your theme\css directory and save. You cn also directly edit your CSS elements directly within the Sources panel before saving.

 

Note: Tracking down and correctly adjusting the elements in your pages can take a lot of time and you may need to use Google search for solutions for your particular CSS solutions but, the final results will keep you from loosing masses of mobile users. One site that I like for reliable CSS tips and tricks is: CSS Tricks.

 

The Google Chrome CSS Source Window
The Google Chrome Developer Tools CSS Source Window

 

Saving your Test Edits and Applying them to your Live Site.

 

Once you are satisfied with all the editing of All mobile devices in the Chrome Inspector, from iPad to iPhone 4 through iPhone 6 plus in both, portrait and landscape modes, you can upload your themes\css folder and your themes .info file to their proper directories.

  1. The themes\css folder should be uploaded to themes directory. Example: sites\all\themes
  2. Your themes .info file should be uploaded to... Example: sites\all\themes\YOURTHEME
  3. Go to your live site and clear all caches and go into the Chrome Developer Tools Inspector mode to review your edits and test (F12).

 

Note: Google recommends that you should always double check your edits on all the different mobile devices as you can to verify that your CSS rules are implemented correctly.

 

Call me anytime if you have any questions and...
Have fun! 1 (302) 396-8558 | Email

Ralph Manis - Infinitee Drupal Web Design