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 240×320. 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; }