Did you know you can ‘mimic’ how your site will look on an iPhone or iPad using Chrome (on the desktop)?
Open your site>right click anywhere>click ‘inspect element’>click the ‘gear’ in lower right corner>click ‘overrides’>Check the ‘User Agent’ box>Select the device desired in pull down to right>Check ‘Device Metrics>
If you are using a mobile theme, refresh the page to see it!>
Note, some hosts check the user agent string and attempt to serve a mobile page on your behalf – check if yours is doing such.
All that said, TwentyTwelve was designed to be responsive and should work well on these devices/mobile browsers – if it is not, some site content (from a previous version/theme/plugin) may be cached on the device…clear site cache on device…reload site…
Edit and Add: …this site is not running twenty twelve (a child theme, maybe), not twenty twelve..
Thanks for the information…I’ve been using Shortstack to view on different platforms.
According to the admin panel it says the current theme is Twenty Twelve… :o/
All caches were cleared and it’s still not fitting.
I came in to the site after most had been done already, so I’m not sure if code was changed that is effecting the size on the different platforms.
Actually, now that I think of it, I guess it could be Twentytwelve but uses a Custom CSS Plugin etc for the styles…
That may therein be the issue, a problem with the Custom CSS…
Check first for CSS Errors:
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fecruiserbikes.com%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en
Then review Responsive CSS, here is an informative tutorial:
http://www.netmagazine.com/tutorials/build-basic-responsive-site-css
That all said, I think this would cause such an issue:
<div id="content" role="main" style="float: left; width: 930px;">
This is likely in a page template, styling inline is poor design, and fixing the width will cause just what is occurring.
Everything is also shoved left…todays sites float in the middle of the screen…
Thanks, I’m still having troubles though, it’s huge on the iPad as well as iPhone, so much is messed up you can’t even pinch it to fit…it’s simply not there.
<div id="content" role="main" style="float: left; width: 930px;">
Doesn’t come up in the page template, just this does:
<div id="content" role="main">
I thought I could help my uncle, but I may be over my head :o(
Still looking for some help to figure out how to resize the blog so it will fit on tablets and phones.
Any guidance is appreciated.
Thanks,
Nikki
From what I’ve seen, twentytwelve works fine on a tablet.
The code mentioned above is added from someplace else – that theme has modifications – for example this is not part of twentytwelve either:
.site-header {
padding: 0;
width: 1245px;
}
One way to test it is to make a backup of your files and then reinstall twentytwelve.
Yes, Twenty Twelve should work on the iPad and iPhone, but something’s been changed before I got to it, so it doesn’t anymore.
I have no idea what was changed in the code…looking for insight into what it may be to reset it back to the original format.
Make a backup copy of your current style.css file – and then replace that with a new one from a new copy of twentytwelve.
If would be really smart to make sure your site is fully backed up before messing with this…
Twenty Twelve should work on the iPad and iPhone
not if you add any fixed width elements like your slider into the content or the templates.
either make sure that all elements in the site are flexible to respond to the browser width, or fully set the theme to a fixed width and remove all ‘responsive’ formatting from the stylesheets.
I deactivated the slider to see if that would work, but still no-go :/
I made a backup of the style.css and then replaced it with a new one, but that totally messed up the entire site.
I’ve seen your magic here in the forums while trying to fix this alchymyth (it is magic, right?).
I realize I’m above my head trying to help my uncle, but I really need to fix it for him. How do I
make sure that all elements in the site are flexible to respond to the browser width, or fully set the theme to a fixed width and remove all ‘responsive’ formatting from the stylesheets.
?
Seriously appreciate the help!
Nikki
Envyart – are you saying that if I remove all REM units, this will fix it? If so, how does one override them in a childtheme. For example, if I, say, take out padding the old way I have to add padding: 0; in my new theme to override the parent theme styles. If I simply remove all the REM units in the child theme, wont that still render when it reads the parent css?
I added a Banner to my site and it threw everything off.
At least I think that is it:
http://freegiftseveryday.com/authors-page/
Before I go and rebuild this entire site with the twenty ten parent ,,, does anyone have suggestions??
@lois Reed: As per the Forum Welcome, please take the hint & post your own topic.
Still racking my brain trying to fix this…
Just wondering if maybe the update I took for WordPress could have affected the custom code that was put in to the style.css?
I’m trying to think back and other than adding new photos and changing wording, I’ve only updated the WP version and plugins.
Thanks, again for any time :o)
