One more boring housekeeping post. This is for my reference as much as anything else because it took me hours of wailing and gnashing of teeth to figure out where I went wrong. So, in theory, if I run into this problem again, I'll have documentation of what I did. And hey, if this helps someone else, that's great.
Essentially, I got tired of maintaining multiple journal pages. Wouldn't it be nice to have a single page that degrades gracefully for different screen sizes? Well, yeah. The big issue is with image sizes. I found this nifty little snipped of CSS code:
img {
max-width: 100%;
height: auto;}
What it's supposed to do is make the image auto-size within the container. (Each element of the journal is in its own container. Think of it as a table cell on steroids, if you want. Except it's not as structured and rigid. There's a reason they call it fluid design.)
It didn't work. Whisky Tango Foxtrot? I discovered that the text box I use for editing posts adds size information in the img tag. Generally, that's a good thing, but I wanted to be able to override that. I tried this:
img {
max-width: 100% !important;
height: auto !important;}
Still nothing. Well, you don't want the whole story, and I'm mainly writing this so I can remember what I did should I run into this issue again. (Hooray for the search function!) It turns out that the containers themselves need to be fluid. I'd set mine at 500 pixels wide. So I changed the width to max-width. Still nothing. Then I dug into the page code. Turns out the control I use to render the blog post was set at 500 pixels wide. So I removed that. It worked!
So I now have a more fluid site design - one I hope will render better on different devices and screen widths. Please let me know if you run into trouble.
Update: Oh, joy. The page looks like crap in IE. I'll be working on that today.
Update the second: More banging my head against the desk. Had to add height: auto and then discovered your IE mileage may be better if you view in Compatibility Mode. Sorry about that.