This has been bugging me for a good while. Tracked it down to the Facebook "Like" widget taking up more horizontal real-estate than it should.
If I deleted the fb-like widget, everything would go back to normal. Unfortunately, that's not proper solution...
So why is it even showing up!?
- Restricting the widths on the iframe didn't seem to do anything.
- Restricting the width of the parent div didn't seem to do anything either.
- Setting overflow hidden on the parent div didn't work.
So what now?
The answer lies a few elements above. The one just above the <script> tag. There's a hidden div #fb-root.FB_UI_Hidden, which has a div and iframe nested inside it.
That iframe is injected during load time and although out of sight, it has a width of 575px causing the horizontal scrollbar to show unnecessarily.
Solution? Well first, don't use overflow; hidden on the <body> tag as suggested here. That's just silly because it disables your scrollbars altogether.
The correct method is to target CSS styling to it and restrict the width.
.FB_UI_Hidden { width: 100px !important; } That's it! Another one line wonder.
