WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Twenty Twelve doesn't fit on iPad or iPhone (19 posts)

  1. ENVYart
    Member
    Posted 1 year ago #

    Hi all,

    Looking for some help, I am trying to aid my uncle in his website, but can't figure out why the Twenty Twelve theme doesn't fit on iPad or iPhone.

    This is his site ecruiserbikes.com not sure what other information is needed.

    I have made a child theme, not currently running, due to the fact that it messes up the logo and leaves a white box in the middle of the site, reason unknown to me, as I'm new to WordPress.

    Appreciate any direction given :o)

    Nikki

  2. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

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

  3. ENVYart
    Member
    Posted 1 year ago #

    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.

  4. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

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

  5. ENVYart
    Member
    Posted 1 year ago #

    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(

  6. ENVYart
    Member
    Posted 1 year ago #

    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

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  8. ENVYart
    Member
    Posted 1 year ago #

    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.

  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  10. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    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.

  11. ENVYart
    Member
    Posted 1 year ago #

    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

  12. Lois Reed
    Member
    Posted 1 year ago #

    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?

  13. Lois Reed
    Member
    Posted 1 year ago #

    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??

  14. esmi
    Forum Moderator
    Posted 1 year ago #

    @Lois Reed: As per the Forum Welcome, please take the hint & post your own topic.

  15. ENVYart
    Member
    Posted 1 year ago #

    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)

  16. LoisReed
    Member
    Posted 1 year ago #

    hint taken

  17. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    @ENVYart -

    Just wondering if maybe the update I took for WordPress could have affected the custom code that was put in to the style.css?

    Yes, default themes are updated/overwritten when WP is updated - so if you made changes to theme files, they are lost upon update. That's precisely why you should be using a Child Theme to make changes.

  18. ENVYart
    Member
    Posted 1 year ago #

    Thanks WPyogi! I was able to at least make it viewable now. (I came into the site after the code was changed, and the first thing I did was create a Child Theme.)

    Appreciate the help!

    Nikki

  19. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    YAY! We love child themes - I'm sorry you're having to suffer the consequences of someone else not doing it right...

Topic Closed

This topic has been closed to new replies.

About this Topic