title: button position placement problem in multiple browser
body: <p>I am working on this site- <a href="https://sheraspace.com" rel="nofollow noreferrer">sheraspace</a>  .I want to my chat and phone  button in the bottom position.But the button works differently in different browser.It also exceeds the screen in some cases.I also want it to adjust accordingly during zoom in and zoom out.What can i do to keep it constant in multiple browser. This is what i tried for the chat button so far:</p>
  
  <pre><code>    &lt;div&gt;
      &lt;p
      style={{
      position:'absolute', top:'-13.5%', right:'15px', 
                backgroundColor:'transparent', color:'#fff'}}&gt;
       &lt;button onClick={() =&gt; this.handleClickOutside()} style={{
  
                                  }}&gt;
       &lt;FontAwesomeIcon icon={faPhone} style={{color:'#fff' , 
               marginRight:'8px'}} /&gt;
        &lt;span style={{fontSize:'11px'}}&gt;Call us on&lt;/span&gt;&lt;p style= 
            {{margin:'2px'}}&gt;+880 1738174440&lt;/p&gt;
           &lt;/button&gt;
             &lt;/p&gt;}
  
     &lt;a style={{position:'absolute', top:'64px', left:'0'}} 
            href="javascript:void(Tawk_API.toggle())"&gt;
           &lt;img style={{height:'73px'}} src={phone} /&gt; &lt;/a&gt;
  
       &lt;/div&gt;
  </code></pre>