How to make facebook social plugin fully responsive - html

Question

I am using Facebook social plugin for developers on my website. It's not responsive on mobiles and tablets I followed few StackOverflow answers but still not able to solve my issue. I have a content row and and a span6 class in which my widget is placed.
my HTML is like this.
<div class="row content_row">
<div class="span6">
<div class="Facebook">
<h2><a id="about_us">Facebook</a></h2>
<div class="fb-page" data-href="https://www.facebook.com/pages/IFix-And-Repair/242100755854336" data-tabs="timeline" data-width="500" data-height="400px" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/pages/IFix-And-Repair/242100755854336">iFixandRepair - Wellington</blockquote></div></div>
</div>
</div>
i did apply some CSS From other answers but it also failed.
Css:
.fb-page, .fb-page iframe[style], .fb-page span {
min-width: 100% !important;
width: 100% !important;
}

Answer 1

Restrictions
Using CSS3 transform
Set data-adapt-container-width="false"
(or something went wrong under 500px)
This fb-plugin was set to 500x500
<script src="jquery.rwd-fb-plugin.js"></script>
<!--FB-page-plugin part1-->
<div id="fb-root"></div> <script>(function(d, s, id) { ... } </script>
<!--FB-page-plugin part2-->
<div class="fb-page"> ... </div>
$(function(){
$('.fb-page').rwd();
});
Demo: RWD-fb-plugin

Answer 2

You need call fb-page div with new data-width and call function "FB.XFBML.parse();" every time, when is site resized.
So JavaScript can help for this problem:
<div class="row content_row">
<div class="span6">
<div class="Facebook">
<h2><a id="about_us">Facebook</a></h2>
<div class="facebook-wrap">
<div class="fb-page" data-href="https://www.facebook.com/pages/IFix-And-Repair/242100755854336" data-tabs="timeline" data-width="500" data-height="400px" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/pages/IFix-And-Repair/242100755854336">iFixandRepair - Wellington</blockquote></div></div>
</div>
</div>
</div>
</div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.2";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$(function(){
$(window).resize(function(){
$('.facebook-wrap').html('<div class="fb-page" data-href="https://www.facebook.com/pages/IFix-And-Repair/242100755854336" data-width="'+$('.facebook-wrap).width()+'" data-height="400px" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/pages/IFix-And-Repair/242100755854336">iFixandRepair - Wellington</blockquote></div></div>');
FB.XFBML.parse();
});
});
</script>