title: How to make facebook social plugin fully responsive
body: <p>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.</p>
  
  <p>my HTML is like this.</p>
  
  <pre><code>&lt;div class="row content_row"&gt;
  &lt;div class="span6"&gt;
  &lt;div class="Facebook"&gt;
  &lt;h2&gt;&lt;a id="about_us"&gt;Facebook&lt;/a&gt;&lt;/h2&gt;
  &lt;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"&gt;&lt;div class="fb-xfbml-parse-ignore"&gt;&lt;blockquote cite="https://www.facebook.com/pages/IFix-And-Repair/242100755854336"&gt;&lt;a href="https://www.facebook.com/pages/IFix-And-Repair/242100755854336"&gt;iFixandRepair - Wellington&lt;/a&gt;&lt;/blockquote&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
      
  i did apply some CSS From other answers but it also failed.</p>
  
  <p>Css:</p>
  
  <pre><code>.fb-page, .fb-page iframe[style], .fb-page span {
   min-width: 100% !important; 
   width: 100% !important;
   }
  </code></pre>