Facebook Like button causing horizontal scrolling on mobile device

Question

I have a Facebook Like button implementation which is rendering fine in all browsers desktop and mobile. But the issues lies on low-res devices with resolution of 240x320. the Like button is causing the device to zoom into the page thus rendering horizontal scrolling.

The buttons is rendering fine on devices with width >= 320px like the iPhone etc., but older android devices with width less than that are facing issues.

The way I see it. The page loads fine, then makes a server call to Facebook and then returns with some parameter that breaks it all up. It is generating an <iframe>. I am trying to put width and overflow CSS parameters but none seem to work. I am initializing the Like button like this:

<div id="fb-root">
<!--Facebook begins-->       
        <div class="fb-like" data-href="<%=RedirectURL%>" data-send="false" data-layout="button_count" width="80" data-show-faces="false"></div>
        <!-- ends -->
</div> 

<script>
        window.fbAsyncInit = function () {
            FB.init({ appId: '328982000461228', status: true, cookie: true,
                xfbml: true
            });
            FB.Event.subscribe('edge.create', function (response) {
                ntptEventTag('ev=Social&Action=Method Shared');
            });
        };
        </script>
    <script type="text/javascript">

Answer 1

None of the above solutions helped. Finally got the answer. Although it is not the best solution, but it gets the job done.

I applied this to the parent container of the fb like button:

.socialIcons { display: inline-block; width: 200%; /* for low res androids */ overflow: hidden; margin: 5px 0 5px 10px; }