Need help? Check out our Support site, then


Custom CSS for mobile browsers

  1. 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.

  2. The code and CSS needed for mobile browsers can be quite different, however some of your changes can be applied. How many of them, I don't know. Go to appearance > custom design, click to slide out the CSS edit window and then below that check the box to have your changes applied to the mobile theme and click save. See what happens. I can't guarantee anything as I have not tried it to see what will be applied and what will not.

  3. I actually had it set to save the CSS for mobile devices. So I set it to not save the CSS for mobile devices to see how it'd respond and that actually enabled the mobile layout on my Iphone browser (iOS? not sure of the exact terminology for iphone's browser). It looks a lot more cohesive if not customized exactly.

    I think I'm going to work with this option but I was reading about creating a separate CSS for mobile browsers. I might have taken it out of context towards wordpress.com but is it possible to Customize your CSS for a mobile browsers separate from desk/lap tops but within the same CSS sheet? I'm referring to a line of CSS such as @media only screen and (max-width: 640px) {}
    I found out about this at this site http://www.techgyd.com/the-process-of-modifying-css-for-making-your-website-mobile-friendly/1835/ but it might be talking about wordpress.org

    Thanks again sacredpath, you my boy.

  4. Yeah, the mobile browser here might not be too forwardly stylish, but it does work very well on mobile devices.

    We cannot modify the mobile CSS here, other than what is provided by the option on the CSS page. I suspect it works better on some themes here than on others.

    I've gone to using only responsive designed themes on all the sites I do since they seamlessly work on all devices (seamlessly if the theme designer has their stuff together) and then I don't have to worry about mobile themes. I don't like having to do CSS twice if I can help it. :-)

    You are welcome, and thank you.

  5. There's a big difference between the mobile theme and a responsive theme. This page should help explain what the WordPress.com mobile theme is and how to enable/disable it:
    http://en.support.wordpress.com/themes/mobile-themes/

    Responsive designs, aka mobile-friendly designs, can be built in on a per-theme basis. Here is a list of WordPress.com themes that use a responsive width, which means they are designed from the start to look nice on various differently sized devices like phones and tablets:
    http://theme.wordpress.com/themes/features/responsive-width/

    It's quite possible to blow up the mobile-friendliness of a responsive design site by using custom CSS. Just be careful when editing! If you get in over your head, you can ask targeted specific questions in the forums here, but to get redesign help or for in-depth projects you should hire a designer.
    http://en.support.wordpress.com/customize-my-site/request-theme-customization/

  6. Appreciate it. I ended up customizing my CSS so the full site would look good on mobile browsers if the user chooses to go to the full site; otherwise they visit the mobile site which works out good enough. Thanks again.

  7. Responsiveness plays a key role when it comes to Mobile browsers. Width of the page must be in % inorder to adjust. If you mention any of the div width or sidebar width in percentage in pixels it will end up in a mess. i Did manage to succeed in Dreamstopixels yet it looks broken in IEs. Have to do IE Fix too

  8. @youdreamwedevelop
    http://www.dreamstopixels.com is not a free hosted WordPress.com blog.

    You will not find any solutions to WordPress.ORG blog questions here at WordPress.COM. Please read this http://support.wordpress.com/com-vs-org/ WordPress.com and WordPress.org are completely separate sites with different username accounts and logins. We provide support only for free hosted WordPress.com blogs.

    You are posting to the wrong support forum. If you don't have a username account at WordPress.ORG click http://wordpress.org/support/ and register one on the top right hand corner of the page that opens, so you can post to the support forums there and receive advice from WordPress.ORG bloggers.

Topic Closed

This topic has been closed to new replies.

About this Topic