I recently customized the CSS on my blog, http://www.haikucolumbia.wordpress.com
Unfortunately I naively believed that the CSS would just cross over and look the same on mobile browsers. But I took a look at the blog after my customization on my Iphone Safari browser and it was all screwed up and rearranged. On the mobile site it seems the PNG images are arranged as they would be on non-mobile IE, Chrome or Firefox but the rest of the Custom CSS and HTML isn't lining up. Not sure how exactly to explain it but I'm hoping one of you will check it out on your smart phone and desk/lap top.
Does any one have any suggestion on how to make my custom CSS mobile friendly while keeping all the PNG elements, banners, and links arranged as I do on my laptop's browsers? Is there any method of converting it to mobile quickly and simply or is it going to involve completely redoing my CSS? Or, hopefully, is it just a problem with Iphone Safari? Any quick fixes?
I searched and didn't immediately find any post on this. Also I have another blog, http://www.babymoonrecords.wordpress.com that isn't customized at all, don't even own the custom CSS tool for it, and that loads completely fine on mobile browsers. I'm figuring without customized CSS wordpress themes, or at least Coraline, are set up to load properly on mobile devices.
Any help folks? Thanks in advance.
The blog I need help with is haikucolumbia.wordpress.com.