Fitting images for WordPress Mobile Edition

I have recently made my WordPress blogs support optimized viewing on mobile devices such as the iPod Touch. Not that they had any problem rendering on the iPod Touch, but larger characters and a single narrower column makes a website much easier to use on a small screen. For Stochastic Scribbles, I used the WordPress Mobile Edition plugin, currently at version 3.1, to make it mobile.

However, the plugin does nothing about the size of images. So when I have a floating image aligned to the right, a blog post would typically start with a single line with a single word, and the rest of the text is continued far down below the image. And large images can extend past the right edge of the screen, ending up cut off. This is pretty ugly. (Another plugin, WPtouch, does a better job of handling images.)

Page with unmodified WordPress Mobile Edition

To make image display saner when viewing Stochastic Scribbles on an iPod Touch (and hopefully other mobile devices as well), certain modifications were made to the stylesheet at wp-content/themes/carrington-mobile-1.0.2/style.css. First, I specified maximum widths for aligned images by adding lines for max-width as in the following, which would be able to handle images with or without captions:

.alignleft {
	float:left;
	margin-right:1em;
	margin-bottom:1em;
	max-width: 35%;
}
.alignright {
	float:right;
	margin-left:1em;
	margin-bottom:1em;
	max-width: 35%;
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
}
Second, I also added the next three lines in case a captioned images has been inserted with no alignment:
.alignnone {
        max-width: 100%;
}

Finally, I added the next four lines. If an image has to be shrunk to fit a maximum width, the height line ensures that the height is adjusted as well so that the aspect ratio is maintained. The max-width line ensures that an image not inserted through the standard WordPress method would still fit the horizontal limits of the screen.

img {
	height: auto;
	max-width: 100%;
}

With these modifications, Stochastic Scribbles looks a lot saner on the iPod Touch. Hopefully it would work just as well on many other mobile devices, although the modifications would be useless for those that lack support for stylesheets. And maybe the current version of the theme included with WordPress Mobile Edition has similar changes already, but they are lacking with the theme bundled with the current version of WordPress Mobile Edition, version 3.1.

Page with unmodified WordPress Mobile Edition

I also use the Smart Youtube plugin to embed Youtube videos on Stochastic Scribbles. These also have placeholders that are too large for the screen on a mobile device, so I also added the following lines to make them fit better:

.youtube object {
	display: block;
	width: 70%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

Now to wait for stable modules and themes for Drupal so I can make my home page look better on mobile devices as well. It might be some time before one comes out that satisfies all my silly requirements (same URLs for normal and mobile pages, not having to turn off the cache, etc.) Although I could probably do something with a multisite configuration and rewrite rules if I were willing to spend a great deal of time on the problem ...

Story tags: 

Comments

It's not often that I come across the exact answer I was looking for, but many many thanks for this little bit of code.

Why on earth the standard css with the Mobile Edition doesn't do this I'll never know, but this fix was just the job.

The only modification I made for my purposes was to set the maximum width to 90% as otherwise the pictures were getting too small to get much from.

Thanx man! Just what I was looking for.

this gave me quite a bit of headache 'til I found your page. thanks man.

thank you very much for this article that really works for my mobile web

You've just saved my ass!