For the facebook like button, I need to be able to keep a default width on desktop resolution (539px) and change the width to 100% when the screen resolution drops below 640px (mobile). This is not working as the fb-like div relies on an attribute called: "data-width", which sets a remote dynamically loaded iframe width and child element widths within the src html. So far I have tried:
<style>
@media only screen and (max-width: 640px) {
div.fb-like {width:100% !important}
}
@media only screen and (min-width: 960px) {
div.fb-like {width:539px !important}
}
</style>
<div class="fb-like" data-href="https://www.facebook.com/myFacebook" data-send="true" data-show-faces="true" data-font="lucida grande" data-colorscheme="dark"></div>
How can I alter the "data-width" value when I have a lower screen resolution or mobile device?
As a temporary measure, I have done the following to prevent the like button from breaking the layout on mobile devices:
@media only screen and (max-width: 640px) {
div.fb-like {width:100% !important; overflow-x:auto}
}
This is not ideal as a user would have to swipe left to view any overflow, but it is the only solution I can think of until someone else has a working suggestion. Screenshots of this are attached (iOS 7 iPhone & Android 4.3.1)...
Try putting the .fb-like
class into a div wrapper with style="width:100%;
. Now you could add something like a $(window).bind("load resize", function(){}
to get the actual width of the browser and resize the like button.
Edit:
<script>
var container_width_current = $('#WRAPPER-DIV').width();
$(window).bind("load resize", function(){
var container_width_new = $('#WRAPPER-DIV').width();
if (container_width_new != container_width_current) {
container_width_current = container_width_new;
$('#container').html('<div class="fb-like-box" ' +
'data-href="https://www.facebook.com/adobegocreate" ' +
'data-width="' + container_width_new + '" data-height="730" data-show-faces="false" ' +
'data-stream="true" data-header="true"></div>');
FB.XFBML.parse();
}
});
</script>
Edit #2:
This is a quick CSS approach:
#u_0_0 {
width: 100% !important;
}
.fb-like.fb_edge_widget_with_comment.fb_iframe_widget, .fb-like.fb_edge_widget_with_comment.fb_iframe_widget > span, .fb-like.fb_edge_widget_with_comment.fb_iframe_widget > span > iframe {
width: 100% !important;
height: auto !important;
}