I am using the like button widget with the following settings:
The sidebar is 282 px wide. The theme is based off of twentyeleven, but the layout is not responsive. It has fixed width that does not change with any @media max/min-width calls.
Everything is a-ok when viewed from Mac OS safari, firefox, chrome. Even when I use iPhone user agent on Safari and make the screen as thin as possible, everything looks fine.
But...when viewed on an actual iPhone the sidebar is detached from the main content area, underneath it. There must be some css getting injected into the page based on the user agent or width or something (I am surprised I can't reproduce it with the Mac OS Safari iPhone user agent at a small width) - because it is causing the entire layout to get disrupted. The only thing that looks normal is the footer. The header is half as wide as it should be, the navigation menu is broken into two lines, the background of the content area is truncated.
When I disable the facebook plugin, the layout looks perfect on an iPhone.
The only thing I noticed when using the iPhone user agent on mac os safari was the button is slightly larger - understandably so it is easier to click on that device. But something else is going on that I haven't been able to isolate.
Is the sidebar simply to narrow? Why am I not able to reproduce the layout I see on an actual iPhone when I use mac os safari user agent iPhone with very thin width?