title: Make a Facebook Like Box responsive
body: <p>When we want to insert a <a href="https://developers.facebook.com/docs/plugins/like-box-for-pages" rel="nofollow">Facebook like box</a>, we're given auto-generated code to insert into our website.</p>
  
  <p>Unfortunately, the width of the like box is hard baked into the code:</p>
  
  <pre><code>&lt;div class="fb-like-box" data-href="https://www.facebook.com/bibandtucker.net.au" data-width="450" data-colorscheme="light" data-show-faces="false" data-width="300" data-header="true" data-stream="true" data-show-border="false"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>How can I make the Facebook like box responsive, so that it will reduce in width to accommodate content areas less than the hard coded width value?</p>
  
  <p>You can see the problem on <a href="http://www.bibandtucker.net.au/test/" rel="nofollow">this website</a>.  Watch what happens when you reduce the width of the view port.</p>