WordPress.org

Support

Support » How-To and Troubleshooting » Facebook Like Popup Flyout Cut Off

Facebook Like Popup Flyout Cut Off

  • Hello all,

    I have been adding various follow me type plugins to my blog at http://www.thewarylemming.com

    No matter what plugin I use, the Facebook Like popup is not flying out as expected. It is cut off and therefore, rather useless.

    Again, it does not matter what plugin I use, so it would appear that I need to change overflow to visible or auto – but have no clue where to put the code – or even what code to put.

    I would welcome some help!!

    Thanks,
    TWL

Viewing 9 replies - 1 through 9 (of 9 total)
  • Moderator Andrew Nevins

    @anevins

    Forum moderator

    Thanks Andrew – I saw that previously but is does not seem to indicate a fix that is reliable.

    I would think with the gazillions of WP sites out there, that a solution would be somewhat more obvious to this issue…

    anyone? It is driving me crazy!

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    That thread I referred pointed out

    The culprit CSS style.

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

    Hereby your solution

    iframe {
     max-width: none;
    }

    Thanks Andrew. I have a child style.css. should is imply add this to it:

    iframe {
    max-width: none;
    }

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Yes, add that to your Child Theme stylesheet.
    If it doesn’t work first-time, try clearing your cache. If still not, add !important on the end of your style.
    E.g

    max-width: none !important;

    Information on what !important does: http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

    Thanks. Done. And it appears to work for the most part. I still catch it occasionally not working, but trying again solves the issue. What worries me is that readers may not be s patient!

    Really appreciate the help!

    Awesome! That solved my problem. Somewhere on the forum another approach seems to work as well:

    .fb-like span {
    	overflow:visible !important;
    	width:450px !important;
    }

    First I though it worked, however the problem with this code is that it breaks any responsive layout for that it adds invisible space to one side of your layout. So when you check the layout on a mobile device for example you’ll notice additional space to the right. That’s kind of annoying. And it’s pretty confusing for users, because you have to double tap the display to focus wrapper in order to get the supposed look. That basically rendered my responsive layout useless.

    iframe {
     max-width: none;
    }

    …on the other hand doesn’t cause any trouble. Layout looks perfect on my Nexus, the way I intended it to be on small screens! Cheers mate, much appreciated!

    I just want to say, THANK YOU SO VERY MUCH!

    This was such an annoying problem, I was in the same situation as CaptainCrunch – the fix using the width property that is offered everywhere else just didn’t work right, as it messes up the layout on smaller screens. This iframe fix however works great on both bigger and smaller screens. Thank you!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Facebook Like Popup Flyout Cut Off’ is closed to new replies.
Skip to toolbar