WordPress.org

Forums

Facebook Like Popup Flyout Cut Off (10 posts)

  1. shonline
    Member
    Posted 3 years ago #

    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

  2. Andrew
    Forum moderator
    Posted 3 years ago #

  3. shonline
    Member
    Posted 3 years ago #

    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...

  4. shonline
    Member
    Posted 3 years ago #

    anyone? It is driving me crazy!

  5. Andrew
    Forum moderator
    Posted 3 years ago #

    That thread I referred pointed out

    The culprit CSS style.

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

    Hereby your solution

    iframe {
     max-width: none;
    }
  6. shonline
    Member
    Posted 3 years ago #

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

    iframe {
    max-width: none;
    }

  7. Andrew
    Forum moderator
    Posted 3 years ago #

    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

  8. shonline
    Member
    Posted 3 years ago #

    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!

  9. CaptainCrunch
    Member
    Posted 2 years ago #

    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!

  10. peterpansexual
    Member
    Posted 2 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic