Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #14947

    As the title says when viewing the site on an iDevice it shows correct briefly right after loading but then the border appears on the right side. Anyone having the same issue and possibly found a fix or workaround for this?

    The site can be viewed here: http://www.ivorylake.com/

    #85631

    Hi ivorylake,

    I can’t see the issue on my end. Can you post a screenshot?

    Regards,

    Ismael

    #85632

    Have you looked at the site on an ipad / iphone?

    Anyway here you can see the problem: https://www.dropbox.com/s/69jdyvvqnevnzmm/il-strange-border.png

    As you can see the site is not centered and has a big black border on the right side of the page, whereas I think it should just fill the whole screen.

    #85633

    Hi ivorylake,

    I checked on my Droid and the website is full screen for me – no black border. I’m going to tag the rest of the support team to see if they have issues on their devices.

    Regards,

    Mya

    #85634

    Hey!

    You can try to add following meta code to header.php:

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    I couldn’t reproduce the error on my lg p700 too.

    Best regards,

    Peter

    #85635

    Thx dude I had thought about that solution too, however this will prevent users to zoom in? Anyway, as a last resort I could use that. I’m still open for other suggestions though :-)!

    #85636

    Hey,

    On the body tag there is background: #333 which is not visible in any screen resolution. Maybe you can add this on your custom.css.

    body {
    background: white;
    }

    It will not take the border out but chances are it will change to white.

    Regards,

    Ismael

    #85637

    I just noticed that when I remove the subtitles/descriptions under the main menu the page looks normal on the iPad… maybe something strange going on there?

    #85638

    Ok I think I have fixed it, by adding this to the custom CSS:

    Code:
    #top .main_menu .menu{
    overflow:hidden;
    }

    Seems that the menu caused the page to appear wider on an ipad than it actually is. Maybe the method I’m using is not correct but for now it works for me..

    #85639

    Hmm looking closer now, the above fix cripples submenu’s… any ideas?

    #85640

    again, this works, for now :)

    Code:
    html,body
    {
    width: 100%;
    overflow-x: hidden;
    }

    #85641

    Hey ivorylake,

    I’m glad you were able to find a fix that works for you and thank you for posing back with it :)

    Regards,

    Devin

    #85642

    I’m having the same problem. Large black border on the right side of the screen when viewed on iphones. The custom CSS he provided didn’t work for me though.

    #85643

    Hey cortneydryden,

    Do you have a link or screenshot? Is it happening on a specific version of the iphone/ios or have you been able to see it on multiple versions?

    Regards,

    Devin

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Strange border on right side when viewed on iPad or iPhone’ is closed to new replies.