I'm working on making this site work with mobile devices. I think I built the site in 2009 and haven't touched it since.
Here is the test page: http://boughterslawncare.com/test.html
The issue is the menu at the bottom on iPhone (both Safari and Opera Touch tested with same results). When it's on everything other than mobile in landscape mode it is fine. When it is in landscape the middle list "Recent Posts" shows the links as smaller.
Makes no sense.
Oh, don't click any of the links or you'll go to the old version of the site and it'll look broken for mobile.
Hi, good to hear from you.
Let me first say that I don't have those phones and can't replicate your problem (I test by size), so your issue may be only browser specific. As I recall, IE and Opera try to think for you on scale issues. Make this change,
<meta content= "width=device-width, height=device-height, initial-scale=1" name= "viewport">
That 'initial-scale' thing tells the browsers that you know what you're doing and to not try to outguess you.
You are setting your breakpoints by px. That can be rough on people whose default font size is different from your own. Retest and convert the px values to ems, so the breakpoint will auto-adjust to the customer's settings.
Thanks GT! I've been out of
Thanks GT! I've been out of this for too long. I didn't intend to use px to set anything, I just used the stock WP template and modified what I'd use. I just left the rest in place, honestly intending to go back trough the CSS and rework it from scratch. But you know what Red Green says, "This is all temporary, unless it works."
And if you didn't use duck
And if you didn't use duck tape, it isn't fixed.