title: Responsive width Facebook Page Plugin
body: <p>Facebook introduced a new Page Plugin to replace the Like box plugin.</p>
  
  <p>Documentation: <a href="https://developers.facebook.com/docs/plugins/page-plugin/">https://developers.facebook.com/docs/plugins/page-plugin/</a></p>
  
  <p>I'm replacing the Like Box plugin with this new plugin. On some websites I've used this CSS code to make the plugin responsive inside a  element:</p>
  
  <pre><code> .fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] {width: 100% !important;} 
  </code></pre>
  
  <p>Replacing this with this code doet not work:</p>
  
  <pre><code> .fb-page, .fb-page span, .fb-page span iframe[style] {width: 100% !important;} 
  </code></pre>
  
  <p>My Page plugin code looks like this (not providing a data-width attribute):</p>
  
  <pre><code>&lt;div class="fb-page" data-href="https://www.facebook.com/MyFacebookPage" data-height="1200" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>It looks like Facebook has added a div element with a inline style element within the DOM loaded by the iframe:</p>
  
  <pre><code>&lt;div style="min-width: 280px; width: 340px;" id="u_0_0"&gt;
  ...content of the plugin...
  &lt;/div&gt;
  </code></pre>
  
  <p>When I adjust this width to 100%, every element is aligned at the full width except the cover photo.</p>
  
  <p>It is possible to give this new Page plugin a responsive behavior just like with the Like box plugin?</p>