Why Is There Excessive Whitespace with Facebook Mobile Comments Plugin

Remove white space beneath Facebook comments plugin

Don't set the height to auto, set the overflow...

Set height:110px and overflow:auto on the Facebook iframe - then comments will expand the height of the iframe dynamically.

Pop these changes in your $().ready function - this works fine for me.

Unwanted white space on right side in mobile view

I think there might be one element on your page which might have a width and a padding or margin exceeding 100%.
When 'inspecting' the page and hover over the white space you might select an element there which is going outside of the wanted page.

Try and find this using the inspect element and change this in CSS with using media queries

Fancybox 3 doesn't resize Facebook plugin on mobile devices

As usual, the fix was deceptively simple and did not involve changing any Fancybox script.

My Fancybox 3 script remained the same as what appears above. The parse and update are still in afterShow.

All I had to do was add a height to the container that holds the Facebook Like button. The Like button was already inside a container DIV that enabled top and bottom margins (to space the button away from the caption and the comment box). I simply added a height to this container DIV, and all of a sudden, all the white space that Fancybox wanted to add when it loaded the Like button on mobile devices was gone. Voila!

Here is the style (I did not post any CSS above). I added this style to the Fancybox CSS script.

.fb-like-container {
margin-top: 10px;
margin-bottom: 10px;
height: 20px;
}

In case you look at my Fancybox 3 link on mobile and still see extra white space at the bottom of the lightbox: that space is caused by the comment box, and is a known issue. The white space that I needed to eradicate in this post was a separate situation, and was much larger and annoying.

Hope this can help someone else with Fancybox someday!

What is causing this white space at the bottom of my page in Chrome?

It might be a 3rd party extension that is causing it as they can modify the look and behavior of the page.

You may want to try disabling the extensions for the time being to see if it is causing the issue.

---

Related Topics