Dynamically resize Facebook Like Box - responsive change of data-width="{n}"

css, dynamically-generated, javascript, responsive-design

Solution

Try adding this to your css code:

.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width:  100% !important;display:block;z-index:2000;position:relative}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe  span[style] {width: 100% !important;display:block;z-index:2000;position:relative}

Hope it helps..

Problem

The Facebook code: ``` <div class="fb-like-box" data-href="http://stackoverflow.com/" data-width="160" data-height="100" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="false" data-show-border="false"></div> ``` I am trying to change data-width="{n}" and/or data-height="{n}" dynamically on screen size change (smartphone/tablet orientation change) using either javascript or CSS media queries.

Original source