SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Anyone Having CSS issues in iOS Safari?

    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/

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,210
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    .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.

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Doh!

    Oh geez lol . I actually was debugging the way you mentioned but I just didnt see it...thanks for the fresh eyes Ralph!

    Quote Originally Posted by ralph.m View Post
    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:

    Code:
    .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.

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Could it be user agent?

    Quote Originally Posted by satori83 View Post
    Oh geez 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?

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,210
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by satori83 View Post
    does safari automatically link phone numbers?
    Yes, I think it does. So place a class on the LI and target that inserted link specifically.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •