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: https://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: https://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 https://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.

    Thread Starter jewelsmac6

    (@jewelsmac6)

    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: https://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: https://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.

    https://thethemefoundry.com/blog/html-wordpress/

    Thread Starter jewelsmac6

    (@jewelsmac6)

    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

    https://iphone4simulator.com/

    https://demo.opera-mini.net/public/

    and it displayed correctly.

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

    Thread Starter jewelsmac6

    (@jewelsmac6)

    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 https://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.