WordPress Mobile Styling with CSS

WordPress pages can be styled for mobile or other handheld devices with a simple application of CSS. The main difference is that instead of using a media type of “print”, you’ll use a media type of “handheld”. User agents (web browsers) decide which CSS media type to use based on what they are doing. Much like the “print” media type is used by browsers whenever they print a document, the “handheld” media type is used by many different small-screen browsers, when present.

A little difference might be useful while styling for mobiles, which is quite optional. For example, one of the things you might consider doing for small screens, is, for example, hiding the sidebars and other non-text elements. Or, if you use a fixed width page, you’ll probably want to eliminate that fixed width restriction, and perhaps make the blog entirely simple text format, allowing it to wrap properly on small screens.

Also, percentage-based measurements can be used rather than fixed pixel widths. For example, in your CSS file give the tag body one text size and in text based tags or any tags that you use text in give them a percent to use and test it on a phone. Finally, large background images often do not adjust well to small devices. It is best to exclude these from your handheld style sheets and go for simple solid color backgrounds instead.

If you lack a small screen web device to use, there are several emulators available that can view your site in this mode.

The following CSS sample code for a mobile style sheet makes the background white and the text black.

This would usually be inserted at the very end of your existing CSS stylesheet. A handheld device will pick this up and use the special stylesheet instead of your normal theme style.