Responsive Facebook Comments CSS Hack Broken

Question

I was using:

.fb-comments, .fb-comments span, .fb-comments iframe[style] {
    width: 100% !important;
}

To make Facebook Comments responsi

Answer 1

Adding to the answers here. You really should have a timeout so you're not refreshing the comments dozens of times per second. Also, it's really not great practice to continue crawling the DOM for the elements every time the function is fired, this should be a bit more efficient:

$(function() {
  // cache some selectors so we're not looking up divs over and
  // over and over on resize

  var facebook_comment_resize, 
    comment_resize_timeout,
    $window = $(window),
    $comments_container = $('#comments'),
    $comments = $('.fb-comments');

  var facebook_comment_resize = function() {
    // define a function to get the width of the comment container
    // then set the data-width attribute on the facebook comment div
    $comments.attr("data-width", $comments_container.width());

    // Reinitialize the comments so it can grab the new width from
    // the data element on the comment div
    FB.XFBML.parse($comments_container.get(0));
  }

  // Set a timeout that can clear itself, keeps the comments
  // from refreshing themselves dozens of times during resize
  $window.on('resize', function() {
    clearTimeout( comment_resize_timeout );
    comment_resize_timeout = setTimeout(facebook_comment_resize, 200);
  });

  // Set the initial width on load
  facebook_comment_resize();
});