I'd like to build a blog for an older relative, who doesn't know much about computers. He likes the Automattic Lovebirds theme: http://theme.wordpress.com/themes/lovebirds/
it is a child theme of Forever theme, it doesn't work without it: http://theme.wordpress.com/themes/forever/
I downloaded both themes at the repository: https://wpcom-themes.svn.automattic.com/
Lovebirds is a responsive layout. I'd like the header picture (with the doves in the cage) to always appear on the left. The problem is that when you watch the blog on 1024X768 the picture goes on top and the post excerpts are stretched all over the screen below the picture. How to make everything "fixed" within a safe width? I mean below 980px, as it is ussualy suggested.
The reason is that some of the readers may be more mature people (70+ y.o.), who still use old 4:3 monitors and older browsers (e.g. the default IE in older Win versions), so I'd like to make sure that the blog will look (more or less) the same as it looks on newer screens / browsers (my resolution is 1360x768).
I found this in the styles.css:
@media only screen and ( min-width: 320px ) and ( max-width: 1024px )
I changed max-width to 950px and it seems that it solved the problem. The elements are no longer displaced when I change the resolution, they stay in their position (the picture with the doves stays on the left), however, I'm not sure is this the right way to do it? Also, I heard that some older browsers don't understand min and max-width. Your suggestions are welcomed.
Another problem is how to make the background color to appear the same in both old and new browsers. In my new browser it's kinda yellowish, I tried the theme in old IE, it shows wrong color (kinda light greenish). I'm thinking about solving this with conditional rules in styles.css (like "if it's IE5 or older, then show another color code"). I know how to do this, but how to find the right color equvalent for IE? Which hex code it would be for older IE?