Fresh when it gets here from
Julie Barrett
Friday, October 7, 2011
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.