title: react-facebook-login button style
body: <p>I am using facebook login at my login page, my website is fully responsive, but my facebook login button is not responsive. (i.e when i am using small screen size, facebook login button should change it's with)
  Please refer images below:</p>
  
  <p>1) Normal case:</p>
  
  <p><a href="https://i.stack.imgur.com/7uiVJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7uiVJ.png" alt="enter image description here"></a></p>
  
  <p>2) When Screen is resized to pixels less than 399 (screen width &lt; 400)
  <a href="https://i.stack.imgur.com/ySnpZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ySnpZ.png" alt="enter image description here"></a></p>
  
  <p>3) How i want it to be (in resized browser on PC, or on mobile)</p>
  
  <p><a href="https://i.stack.imgur.com/FTt3G.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FTt3G.png" alt="enter image description here"></a></p>
  
  <p>My react code is:</p>
  
  <pre><code>&lt;div style={{display: 'flex',flexWrap: 'wrap' }} &gt;                           
      &lt;FacebookLogin
          appId={facebookAppId}
          autoLoad={false}
          fields="name,email,picture"
          callback={this.props.SocialSignUp}
          cssClass="btnFacebook"
          icon={&lt;i className="fa fa-facebook" style{{marginLeft:'5px'}}&gt;
          &lt;/i&gt;}
          textButton = "&amp;nbsp;&amp;nbsp;Sign In with Facebook"                                                                
          /&gt;
          &lt;GoogleLogin
              clientId={googleClientId}
              onSuccess={this.props.SocialSignUp}
              onFailure={this.props.SocialSignUp}
              className="btnGoogle"
          &gt;
              &lt;i className="fa fa-google-plus" style={{ marginLeft: 
              '5px' }}/&gt; 
              &lt;span&gt;&amp;nbsp;&amp;nbsp;Sign In with Google&lt;/span&gt;                                                               
          &lt;/GoogleLogin&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS is</p>
  
  <pre><code>.btnFacebook { 
    width: 165px;
    height:35px;  
    border-radius: 4px;
    background: #3b5998;
    color:white;
    border:0px transparent;  
    text-align: center;
    margin:5px;
    display: inline-block;
  }
  .btnGoogle { 
    margin:5px;
    width: 165px;
    height:35px;
    border-radius: 4px;
    background: #db3236;
    color:white;
    border:0px transparent;
    text-align: center;
  }
  .btnFacebook:hover {
    background: #3b5998;
    opacity: 0.6;
  }
  .btnGoogle:hover {
    background: #db3236;
    opacity: 0.6;
  }
  
  @media only screen and (max-width : 399px) {
    .btnFacebook,.btnGoogle{
      width: 100%
    }
  }
  </code></pre>
  
  <p>Please note that I am using <strong>react-facebook-login</strong> package for rendering <strong>facebook</strong> button and <strong>react-google-login</strong> package for rendering <strong>google</strong> button.</p>
  
  <p>Help Please!!!</p>