Support » Themes and Templates » TwentyTwelve customization for mobile devices

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: http://jewelsdesignsworks.com/sp2014

    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: http://jewelsdesignworks.com/sp2014/supperclub

    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 http://jewelsdesignworks.com/sp2014/ 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: http://jewelsdesignworks.com/sp2014/. 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: http://komirestaurant.com. 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 http://iphone4simulator.com/. 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.