I am trying to figure out why the phone number in the header gets pushed vertically on iPad Safari, but on desktop safari if I scale down (responsive) there is no issue. Ive read the latest Safari is pretty buggy, but I cant find any workarounds.
Screenshot from iPad: http://d.pr/i/tQQY
Site: http://bai.satoridevelopment.com/
You can debug this sort of thing fairly easily if you have an iPad/iPhone and a Mac. (iDevice stands for iPhone/iPad etc.)
In iOS, go to Settings > Safari > Advanced > Web Inspector and enable that option.
Connect the iDevice to your desktop Mac (via the cable).
Make sure the desktop Safari’s Develop menu is enabled (under Safari’s Advanced Preferences).
Open a web page on the iDevice, then go to Desktop Safari > Develop > My iDevice (e.g. John Smith’s iPhone) > web page you want to debug.
The web inspector will show the iDevice’s page code and will highlight each element as you hover over the dom elements.
So, going through that process, you’ll see that you have this in your styles:
.sociallinks li a {
width: 24px;
}
That’s causing the problem. In the desktop version there isn’t an <a> in there, so you’ll need to think about how you want to play this. Perhaps add a special class for that element to override the width on that element.
Oh geez:nono: lol . I actually was debugging the way you mentioned but I just didnt see it…thanks for the fresh eyes Ralph!
Actually looking at the code we didnt wrap that in an A tag… does safari automatically link phone numbers?
Yes, I think it does. So place a class on the LI and target that inserted link specifically.