Support » Themes and Templates » TwentyTwelve customization for mobile devices

  • I have created a custom/child theme based off the original twentytwelve theme, and am experiencing issues with it on my mobile device.

    I have created the customizations here:

    And it looks perfect in Firefox, Chrome and IE. But when I look at it on my iPhone, it loads all of the page content in the left sidebar and cuts off the copy. Especially this page:

    I added the following code to my header.php file, but still no luck:
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    Any ideas? Thank you in advance!!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The tag on line 53 (on the frontend) of is unclosed

    <div id="page" class="hfeed site">

    This could be the reason but I’m not sure.

    You said this is a child theme but looks like you copied the entire contents of the twentytwelve/ directory to another sp2014/ directory and changed the names of the Theme and Author in the style.css file. This is NOT a child theme.

    Thank you Jesin! I tried closing the div at the end of the header.php file, but now it breaks the outer glow/shadow of the border: Any other ideas? I have tried everything that I know of and nothing keeps the nav on the left, and the content on the right.

    Basically, I am trying to duplicate the look of this website: Maybe you know of a similar theme? I have located a plugin/widget for the accordion effect, so long as the sidebar/widget area is on the left.

    I mentioned I created customizations based off the twentytwelve theme, yes, and from there I merged my edits with the original into one theme for easy naming. Should I stick to a child folder for customizations like this?

    The closing </div> tag comes in the footer.php file before the get_footer() function.

    Have a look at the original footer.php file for the `<!– #page –>
    ` comment.

    Basically, I am trying to duplicate the look of this website

    I would suggest copying HTML from that site and converting it to a WordPress theme by following this guide.

    Convert HTML to WordPress

    Thank you for the reply Jesin! I tried the code you suggested (placing the closing DIV tag in the footer), but the main content still loads in the left sidebar (underneath the logo) on my device. I have no idea why this would be loading all in the left sidebar, very frustrating! What else would cause this?

    I have created WordPress themes from scratch before, but your suggestion on The Theme foundry looks much easier, so I will try that.

    I have also created a separate child theme folder for the TwentyEleven theme to get the different elements where I want them and to ensure the device functionality works correctly, too. So far, it looks good online and on my device.

    I tried the website on both of these emulators

    and it displayed correctly.

    Is it possible to get a screenshot of the website in your iPhone.

    Oh that’s because I switched it back to the TwentyEleven-child theme since I submitted my last post. But I just switched it back to my custom theme, and it displays all the main content in the left sidebar.

    Check it out now on I’ll leave it in this theme, which I am calling “SP2014”, so you can be sure to see it 🙂

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘TwentyTwelve customization for mobile devices’ is closed to new replies.