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!!
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?
</div>tag comes in the footer.php file before the
Have a look at the original footer.php file for the `<!– #page –>
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.
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.
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 🙂
- The topic ‘TwentyTwelve customization for mobile devices’ is closed to new replies.