Right Margin in Safari Browser Only

Question

This is the link to the website http://lotussystems.in/

When I open it in Chrome(mobile) it works perfect, but when I open it on safari(mobile) then there is a right margin or what it there and also an x-axis scroll is coming, while I Mention overflow-x is hidden. if I put overflow-x hidden then it's not working.

Can anyone plz help me out.

Answer 1

When I emulate a phone browser on your webpage in Chrome, the problem I see is in this line of the markup:

<div class="call-icon">
    <h5 class="text-center" id="#callbox">
        Talk to us
    </h5>
</div>

...and this line:

<div class="popup-header">
   <span class="popup-title">CONTACT
      <div class="popup-image"></div>
   </span> 
</div>

...and this line:

<a href="#" class="ti_scroll bounceInRight  animated" style="display: block;">
   <i class="fa fa-angle-up"></i>
</a>

All of these elements spill over into the right margin, so you need to change their right-margin CSS styles so that they don't have a foot in the right margin. It renders fine in Chrome mobile, but not Safari mobile because the two browsers are rendering your margins slightly differently. See this post on how to detect Safari with Javascript in order to change styles for specific browsers.

Side Note:

In the future, linking your website to StackOverflow without also posting static code is not considered proper Asking Etiquette :

If it is possible to create a live example of the problem that you can link to (for example, on http://sqlfiddle.com/ or http://jsbin.com/ ) then do so - but also include the code in your question itself. Not everyone can access external sites, and the links may break over time.