Responsive theme displaying "mini" version of site on iPhones.
-
I’m working in a responsive theme, but for some reason my mobile setting is still funky. When I use a website that will let me view our site “on a smart phone” everything looks great, as it does when I use the wordpress.com function to view the mobile version in the customizer — the text is the right size, the menu turns into a hamburger icon etc.
However, when I pull it up on either of my coworkers iPhones it just looks like a mini version of our website – teeny tiny menu and text, formatted the same as the site. I did try and add some mobile specific CSS using max screen width to differential, and I’m wondering if that screwed something up?
Thanks in advance for the help!
The blog I need help with is: (visible only to logged in users)
-
Disable the mobile theme please.
The mobile ready theme is default theme offered to those who run old, non-r4esponsive themes and it’s a completely different theme that you do not need to enable at all, if your theme is listed as a responsive layout theme here https://theme.wordpress.com/themes/features/responsive-layout/
A responsive layout theme adapts to different screen sizes so that your website will work (and be optimized for) iPhones, iPads, Android and other mobile devices. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading.
When we use a responsive theme we disable the mobile theme. Go to > Appearance > Mobile and disable the mobile theme
You can read more in the support docs at https://en.support.wordpress.com/themes/mobile-themes/
You can test your site at this link https://www.google.com/webmasters/tools/mobile-friendly/
-
Thanks! I have already disabled the mobile the theme, which did make a huge difference (someone had suggested that when I was having other problems earlier… I know I say if often but you guys are a huge help!)
I guess my current problem may be better worded as this: Real life iPhones are not reflecting the look that is supposed to happen on a smaller screen (aka, the look that is displayed when I select the mobile screen size in customizer). In wordpress when I click the phone icon to see what it will look like on a small screen, the menu bar turns into the hamburger, the search button moves, the videos get bigger, and the text gets bigger proportionally. When I view it on a regular phone in the real world, there are not changes other than everything being 1/10th the size it is on my computer screen. The layout is the same, the text doesn’t get larger, and the menu doesn’t change. Thoughts?
-
Thanks for clarifying. When we need Staff help with issues Volunteers cannot resolve we type modlook into the sidebar tags on our forum threads like this one. How do I get a Moderator/Staff reply for my question? https://en.support.wordpress.com/getting-help-in-the-forums/#how-do-i-get-a-moderatorstaff-reply-for-my-question Then please subscribe to this thread so you are notified when they respond. To subscribe look in the sidebar of this thread, find the subscribe to topics link and click it.
-
-
You’re welcome. Please be aware that Staff are away, they have a backlog, so you need to be patient while waiting as there are many others waiting who posted before you did.
-
Hi @andrea100sec, can you check to see whether you have the same trouble in Chrome on your iPhone? I’m seeing if I can find an iPhone to test with, but that can help us narrow this issue down in the meantime. Thanks!
-
-
-
-
-
Hi @andrea100sec, we’ve tested on several iPhones now. Gavin saw this in Chrome, briefly, but we haven’t been able to duplicate it here yet.
Can you let us know what phone model you’re using, which version of iOS you’re running, and which browser and its version? Thanks in advance.
-
This is a screenshot of what I saw in Chrome. I don’t think the page had loaded correctly. My browser crashed right after I took the screenshot.
-
I have added a second image of the page loaded correctly in Chrome after I re-opened the browser.
-
-
Thank you all so much for your tests and responses!
We are using an iPhone 5, OS 8.4.1, with the Safari browser. Here is the screenshot of what it looks like:
This is what we want it to look like (the responsive layout that shows on WordPress in the customizer when I select the phone icon next to the desktop and tablet):
Thanks again for all of your help and continued efforts!
-
It isn’t as huge of a problem on the front page, but when we navigate around the site as it is shows up on that iPhone now, the text is proportionally really small (does not respond and adapt to be readable on the phones smaller screen).
Thanks again!
-
Thanks @andrea100sec — can you also send a screenshot of what you see for https://canarddemo.wordpress.com/ ? I’m trying to determine whether it’s the theme or something in your site’s configuration.
-
Thanks so much for the help! Here is the screenshot of the demo page on the same phone we are using to check the site:
http://imgur.com/gallery/wmJzCpW
Everything looks good on the demo as far as it switching to mobile. I’m guessing that means there is something in our CSS to blame?
Thanks!
- The topic ‘Responsive theme displaying "mini" version of site on iPhones.’ is closed to new replies.
WordPress.com Forums 