Adapting and fixing Automattic Lovebirds theme for older monitors and browsers

  • I’d like to build a blog for an older relative, who doesn’t know much about computers. He likes the Automattic Lovebirds theme: https://theme.wordpress.com/themes/lovebirds/
    it is a child theme of Forever theme, it doesn’t work without it: https://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 1360×768).

    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.

    Here I pasted the full styles.css of Lovebirds theme:
    https://pastebin.com/jJrH4HKZ
    and here’s another file called rtl.css:
    https://pastebin.com/jp7MWpK6

    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?

    Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi,

    I am guessing that this question is for https://en.support.wordpress.com/ instead. IE5? don’t bother with that, nobody uses IE5 in years same thing with IE6, just focus on IE7+ and perfect solution is https://modernizr.com

    Thanks,
    Emil

    Thread Starter dasfgh

    (@dasfgh)

    I am guessing that this question is for https://en.support.wordpress.com/ instead.

    No, i’d like to build a self hosted wp blog. I posted a wordpress.COM link just to show the theme that i am interested in and it’s parent.

    don’t bother with that, nobody uses IE5 in years same thing with IE6, just focus on IE7+

    the blog is for an older relative and will be visited by his friends. some of them have stone age computers with crt monitors and old browsers, which they use only for emails, ms word and such stuff. I’d like to be sure that the blog looks (more or less) the same everywhere.

    and perfect solution is https://modernizr.com

    Thanks for the link, this is new to me, I hope it can help.
    I’m waiting for more suggestions, thanks everyone

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Adapting and fixing Automattic Lovebirds theme for older monitors and browsers’ is closed to new replies.