[Theme: Twenty Twelve] Change colors on mobile site

  • Hello,

    Problem: Client has asked that their site be white/light colored text on dark grey/black background (with apologies, I don’t want to get into a debate about whether or not this is a good thing to do; we’ve had that discussion). I have successfully modified a Twenty Twelve child theme to produce this effect.

    However, I can’t figure out the CSS to change the mobile (phone-sized) version of the site – it still comes up as black text on a white background. When I open the site in Firefox and modify it using firebug, the CSS that I need to add to get the mobile to look right is thus: 

    body { color: #ddd; background: #000; }
body .site { box-shadow: none; }
.site { background-color: #000; }

    I understand that I’m probably not dealing correctly with this notion of a ‘responsive’ site – that is, the site is built starting from a mobile site and working up from there to a full site. None of the media selectors I’ve tried have had any effect on the mobile look.

    You can see the site here: https://modishmetalart.ca

    Any help gratefully appreciated.

    Chris

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter cweese

    (@cweese)

    Additional info: Apparently this is a browser-specific problem. The site looks fine when viewed using Firebug mobile previews in Firefox.

    However, when I look at it in Safari using iPhone settings, this is where the problem arises. So it’s something to do with how Safari is interpreting media queries…

    Also worth noting – viewing the “mobile” version on sites such as https://quirktools.com/screenfly don’t show me a problem. The site previews as it’s supposed to, with white text over a black background. But when I use Safari’s Develop > User Agent > Safari iOS 8.1 option, or actually look at it on an iPhone or iPod touch, the white background with black text shows.

    Driving me a bit insane at the moment.

    Thread Starter cweese

    (@cweese)

    Update: Wow. Hope this really helps someone else out. After much dinking around, I noticed that Safari was loading an extra class on the body tag called “mobile-site”. I did a site-wide code search for that tag and it showed up in… a Jetpack folder.

    So – if you are having the same problem I had, where your CSS changes are having no effect on your mobile site, and there is a big blue bar across the top where the menu goes, disable the Jetpack Mobile Theme option.

    I repeat: DISABLE THE JETPACK MOBILE THEME OPTION

    Thank you

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘[Theme: Twenty Twelve] Change colors on mobile site’ is closed to new replies.