I had not been able to test my new theme on my phone directly, but using Pinegrow and Chrome dev tools, it looked like everything was OK, so I installed the theme on my site. I know there are some things that still need attention, but my main head-scratcher is that in mobile, the site opens a few pixels too wide. If I pinch it a bit smaller, it seems to “click” in to the right size and stays that way until I follow a link to another page and then it is too wide again.
I’m hoping someone who has messed around with mobile and responsive sites will be able to suggest a place to start looking. So far, I removed
shrink-to-fit=no"
from the viewport definition, but that did nothing.
My site url is: https://unabashedgeek.ca/
EDIT 20-Apr-20: Tried this last night on my daughters iPhone and there was no problem, On three different Android phones, it showed the same symptom.
Thanks in advance,
David
Hi @greyguru,
Better leave the viewport intact:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
And try the following CSS:
html, body {
max-width: 100%;
overflow-x: hidden !important;
}
What you see is horizontal scrolling.
Hope this solves your issue! Let me know.
Don’t forget to empty your browser cache to test the difference!
Regards,
David
Thanks. I’ll try that, although the overflow part gives me the impression that it’s attacking the symptom rather than the problem. But if I was an expert on this, I wouldn’t be asking, would I? Appreciate the fast response.
If you want to test it I woud start with the media queries and take them out one by one to see where the problem is and go from there.
I tried various combinations of your suggestion, including the way I have it live at present, which incorporates everything you suggested. No luck.
EDIT: I’ve moved on to trying the max-width and overflow on an inner div (which isn’t working well either!)
I’m going to go back and check that I don’t, in fact, push more pixels than the phone can support. I thought I’d checked that but maybe not. There’s also the phone pixels vs. css pixels thing, which I don’t fully understand. My phone says it has 540px but when I send it a max-width div of 320px, it seems to accommodate only a few more, like maybe 330 or 340. Well, I’m learning a lot with this project!
Had to look up clearing the browser cache on Android! I’m a mainframe guy who adapted to PCs twenty years ago, but I’m not sure I really want to adapt to phones - they’re too darned small!
Thanks again
David
1 Like
Hi David,
You talk about pixels width on your phone, but you have to use width:100%; that fits a element to any device width. Only the media queries are in pixels or other measurement units. Exceptions are containers with flexible side padding or margin for larger screens or fixed sizes for special elements (for example buttons). I use mostly rem. max-width is also used a lot.
Had a closer look at your site and noticed that you use “Understrap” and a older version of Bootstrap 4. I would make the website in plain Bootstrap 4 with Pinegrow and afterwards convert the ready made website to WordPress.
Did you see the new “Overstrap” Overstrap info, that’s easily to combine with Understrap.
You can also start from the beginning with the latest version of “Understrap” a theme of “Overstrap” (both are direct installers in WordPress, first test the framework and then start building blocks in to it! After every block you have to test if it’s working on all devices and that there are no errors in it. Hope this helps a bit 
Regards,
David
I started this off using the Starter 2 templates from PineGrow, which included Understrap, but I’ve stripped a lot of stuff out. I think the only bootstrap thing that’s left is the navbar, and of course their css. So I don’t know if there is any understrap objects left. Heck, I don’t even know what it is. Once it’s all working, I’d like to go back and see what I can remove, to make it more nimble. There aren’t very many pre-built blocks involved, and it’s CSS grid based and hand-coded php includes - so I don’t really want to start over!
Today I’ve been trying to find a way to access my local test server directly from my phone. I can connect to XAMPP with no problem, but can’t get through to the test site. I’m going to ask another question here regarding that.
Thanks for hanging in with more suggestions - I’m learning a lot. Incidentally, this is a personal project, I’m retired, so it’s become a challenge that I’m going to beat!
David
1 Like