FP KotaSerang.Com

FP KotaSerang.Com

by Ahmad Najiullah

HTML

<div class="batesx">
    <div id="one">&nbsp;<br/>Jenis: Facebook Fanspage<br/>Url: <br/>
  <a href="http://facebook.com/KotaSerangDotCom" title="Official Facebook Fanspage KotaSerang.Com" target="_blank">http://facebook.com/KotaSerangDotCom</a><br/><div class="iconajah separator" style="clear: both; text-align: left;">
<img alt="facebook icon" border="0" src="http://1.bp.blogspot.com/-hONnH17CGDs/UwcTkFjLZWI/AAAAAAAAAh8/x0vqicjmAh0/s1600/facebook-icon.png" title="facebook icon" /></div>
<br /></div>
    <div id="two"><div id="fb-root"></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/id_ID/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="http://www.facebook.com/KotaSerangDotCom" data-height="100%" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="true" data-show-border="true"></div></div>
  </div>

CSS

/* 
Make the Facebook Like box responsive (fluid width)
https://developers.facebook.com/docs/reference/plugins/like-box/ 
*/

/* 
This element holds injected scripts inside iframes that in 
some cases may stretch layouts. So, we're just hiding it. 
*/

#fb-root {
    display: none;
}

/* To fill the container and nothing else */

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}
.batesx { 
  overflow:hidden;
}

.batesx div {
   min-height: 100px;
   padding: 10px;
}
#one {
  float:left; 
  margin-right:20px;
  width:260px;

}
#two { 
  overflow:hidden;
  margin:10px;
  min-height:170px;
}

@media screen and (max-width: 600px) {
   #one { 
    float: none;
    margin-right:0;
    width:auto;
    border:0;
  }
}