'Why on mobile the software buttons overlap a fixed div on my page?

If i can get some help regarding this, it would be amazing. I tried many things but so far I can't get it working as I'd like.

I want to add a WhatsApp button to my page which will be using position fixed to stay on the bottom of the page regardless if the user scrolls or not.

It works great on desktop/laptop screen, but on my Samsung A51 (mobile screen) the software buttons at the bottom of the page overlap the WhatsApp button. This happens on page load only. As soon as I start scrolling, the WhatsApp button move where I expect it to be.

See screenshot screenshot of mobile screen

  {* WhatsApp button *}
  <div class="ns_whatsapp">
    <a target="_blank" rel="nofollow noindex" href="https://wa.me/message/XNWPJSNFCERKM1">
      <img class="img-fluid" src="https://azparts.nl/upload/whatsapp-icon.svg" width="26" height="26" alt="WhatsApp Icon">
      Vragen? Online via WhatsApp
    </a>
  </div>

 .ns_whatsapp {
     background-color: #03b103;
     padding: 8px 12px;
     margin: 10px;
     position: fixed;
     bottom: 0;
     right: 0;
     z-index: 9999;
     overflow: hidden;
     -webkit-transform: translateZ(0);
     transform: translateZ(0);
 }

 .ns_whatsapp a {
    font-size: 18px;
    color: white;
 }

 .ns_whatsapp img {
     margin-right: 0.25rem;
     max-width: 100%;
 }
cssresponsive-design


Solution 1:[1]

I have checked out your website on my phone and I found that the width is less than that of the device width may that's causing this problem. Use

box-sizing:border-box;

in your whatsapp div. Hope this will help you out.

enter image description here

Look at this div size. The orange color space is showing the padding you have added .This is causing the issue. Remove this padding or add the above code that is box sizing.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions