How to Add Horizontal Padding to a Website for Mobile Devices
I recently completed a client’s website when an issue was brought to my attention. When viewing the full site on a mobile device (Android, iPhone, or iPad) the site extended to the corners of the screen. There was no padding on the left or right of the site which looked awkward with parts of the design.
The most ideal way to handle this is to add padding to the container elements at the beginning of the design process. However this was a completely finished, fully tested website. There was not a single container element that could be modified, but instead there were numerous template files and elements acting independently from one another.
It can be argued that the design stretching to the corners of the screen is a good thing, as it utilizes the most amount of space possible on a smaller screen. However this was entirely a cosmetic issue, and the client disagreed with any of the benefits.
The Easy Solution
Create a div at the footer of the site, center it, and set the width of that div to something slighter larger than the rest of the site.
For example, the entire site was set to 950 pixels wide. So right above the </body> tag I added:
<div style="margin:0 auto;height:1px;width:1050px;"></div>
Now when mobile devices view the website, they zoom out to accommodate the 1050 pixel wide div. This creates the padding effect around all containers of the site without modifying any other lines of code. The height is set as 1 pixel so browsers like Safari will recognize the width of the div. To streamline the code you should assign this div a class and define the styles in your stylesheet, but this is the very basic idea of it.
Desktop users should not notice a difference, but if that becomes an issue you can setup a mobile stylesheet to define the div’s styles only when a mobile device is detected.
Interesting technique, though it seems a little unsemantic if I understand the idea correctly. Wondering if the idea you have to utilise a mobile specific stylesheet could instead apply the same padding/width to an existing full width div. I’m no Zeldman, but I just don’t like the idea of putting empty divs in there only for a presentation hack.
Great blog by the way, adding to my RSS feeds.
Daniel,
While it would be ideal to just have a mobile stylesheet, the template I was working with was going to require divs added to it for the padding. This is because all of the elements were not wrapped by a single container div, but instead multiple divs that did not even have individual containers (adding padding broke certain presentational features).
If writing a template from scratch, either having all elements surrounded by a single container div, or placing containers around the larger elements on your page (i.e. header, slideshow, body, footer) will allow you to make changes like this by only touching the CSS.