Question

I’m creating a responsive design but have run into a problem where the Facebook Javascript SDK code’s div#fb-root is causing a horizontal scrollbar when the browser width is less than 590px. I’ve tested this on Chrome, Safari, and Firefox, but the issue only occurs in Firefox.

Should I just set div#fb-root to display:none or is there a better way of doing it?

Thanks!

---

EDIT: As requested, the code below is how I’m loading the SDK. When I don’t load the SDK, the horizontal scrollbars disappear.

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'xxxxxxxxxxxxxxx', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
   }(document));
</script>

Answer 1

The display: none is completely OK, since that <div> is not used for showing anything, it’s a placeholder where all the FB scripts can be loaded into and appended to your page