CSS: Horizontal scrollbar when using Facebook "fb-like" widget

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.

image

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.

image

Source

 
Copyright © Twig's Tech Tips
Theme by BloggerThemes & TopWPThemes Sponsored by iBlogtoBlog