Media Queries in Drupal to display properly in iOS5, iPad and iPhone

June 22nd, 2011 admin Location: Raleigh, NC, Topic: Web Design | Digital Media

[private]

The Problem:

Safari Mobile creates a 1px margin between background DIVs.

Very quickly I wanted to write a post about a nice technique to fix an annoying problem in Safari Mobile. Let’s say that you design a website and you start getting a 1px margin between background images. For example when you fake rounded corners by combining different images. Another use that is commonly used is for custom buttons. This buttons need to be made of at least two images so it stretches depending on the content (sliding doors technique).

In any event, Mobile Safari incorrectly creates a 1px separation between those backgrounds and needless to say it doesn’t look good.

There are several posts out there that explain how to get rid of the problem in XHTML and CSS, however non address the problem when it refers to Drupal itself.

So in three easy steps I am going to explain how to use Media Queries in order to correctly display your website in Mobile Safari – iOS5 for iPad and iPhone.

Step #1: Identify where you have the problem.

Usually it consists of an area where you have three DIVs. A top div that has rounded corners, then a middle section with the content and finally a bottom section with the rounded corners for the bottom. So basically identify the DIVs in question.

Step #2: Open up your .info file in your theme folder and add the following lines ( I am assuming you are using Drupal 6 or 7):

/*Start of Code*/
stylesheets[only screen and (min-device-width: 768px) and (max-device-width: 1024px)][] = ipad.css
stylesheets[only screen and (max-device-width: 480px)][] = iphone.css
/*End of Code*/

Step #3: Create the two new css files and add the following lines to each:

3.1. To the top divs add a negative bottom margin of 1px:

#top {
margin-bottom: -1px;
}

3.2. To the bottom divs add a negative top margin of 1px:

#sbottom {
margin-top:-1px;
}

You got it that’s it. You are using media queries directly into Drupal and it works great to correct the problem in iOS devices.

Simple, straightforward and powerful.

Until next time.

Alex

 [/private]

About the Author

Alex Centeno MBA., is an international creative director and digital media strategist. Currently residing minutes away from the Research Triangle Park (RTP) - North Carolina, and with over 10 years of interactive marketing training and experience, Alex leads Merkados' international clients to maximizing their online business strategies. One of Alex's biggest strengths is his world-class capacity to effectively combine interactive marketing, digital media design and web development.

You may find further information about Alex Centeno MBA. at: and Twitter.

Sobre el Autor

Alex Centeno MBA., Es un director creativo y estratega de medios digitales reconocido internacionalmente. En la actualidad reside a tan solo minutos del Research Triangle Park (RTP) - Carolina del Norte, y con más de 10 años de entrenamiento y experiencia en marketing interactivo, Alex lidera a los clientes internacionales de Merkados™ para maximizar sus estrategias de negocios en línea. Una de las mayores fortalezas de Alex es su capacidad global de combinar de manera efectiva, mercadeo interactivo, diseño de medios digitales y desarrollo web.

Para más información sobre Alex Centeno MBA. puede visitar: y Twitter.