3 replies [Last post]
Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 4 weeks 6 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2057
Points: 2289

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 3 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Mobile issue

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.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 4 weeks 6 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2057
Points: 2289

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."

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 3 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

And if you didn't use duck

And if you didn't use duck tape, it isn't fixed.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.