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)...
