Facebook like button’s comments popup window is half displayed.

2 Views

I’m using Twenty Eleven theme of WordPress.

In other themes, there is no problem but in twenty eleven there is a problem with Facebook like button’s comments popup window. it’s half shown. when I click “Like” button, the view is like below:

Read More

http://i.stack.imgur.com/Hgawi.png

I use Facebook plugin for WordPress. How can I fix this problem?

Thank you so much for your help!

Post Views: 2

Related posts

Leave a Reply

3 comments

  1. It’s a bug in Twenty Eleven (and a few other themes, probably copy-pasted). Open your style.css and look for:

    embed,
iframe,
object {
  max-width: 100%;
  width: 100%;
}

    If you remove the max-width line, it should work! Maybe there’s a more elegant solution but honestly, I don’t know why the size of an iframe should always be limited to its container (in this case the FB button).

  2. Maybe thats a better way of doing it!
    Put a class on your Facebook Like Button div, in this case I used “fb-like” class.

    .fb-like iframe,
.fb_iframe_widget iframe {
    max-width: none;
}

  3. Looking/testing for a lot of solutions I found one that hides the comment window (source here: https://stackoverflow.com/a/12829375/3687838 ) and then I wrote one that shows the window without being displayed in half. I’m not a programmer but from my small experience from tweaking wordpress plugins I came up with this ideea:

    .fb-like {
    z-index: 200;
    position: absolute;
}

    Copy/Paste it in your Custom CSS theme file. The z-index value can be changer even to 10000 if you want your window to be on top of everything.
    If you want to hide the comment window, use the solution provided in the link above with a value of 27px instead of 20px.