How do I stop the facebook send widget from going off the screen?

103 Views Asked by At

facebook share widget going off the screen

It doesn't work on jsfiddle, only localhost due to sandboxed iframes.

CSS Code

.twitter-share-button {
    vertical-align:middle;
}
.return iframe, .return fb-send {
    margin-top: 4px;
}
.returnhere {
    position: absolute;
    right: 15px;
    top: 68px;
}
.return {
    display: inline-block;
    background-color: #3D806B;
    border-radius: 0px 0px 3px 3px;
    color: #DCDCDC;
    font-size: 0.85em;
    height: 30px;
    line-height: 2em;
    padding: 0 5px;
    vertical-align: top;
}
.return iframe, .return fb-send {
    margin-top: 4px;
}
.twitter-share-button {
    vertical-align:middle;
}
.return2 {
    display: inline-block;
    background-color: #3D806B;
    border-radius: 0px 0px 3px 3px;
    color: #DCDCDC;
    font-size: 0.85em;
    height: 30px;
    line-height: 2em;
    padding: 0 5px;
    vertical-align: middle;
}
.return2 iframe, .return2 fb-send {
    margin-top: -3px;
}
.twitter-share-button {
    vertical-align:middle;
}
#u_0_3 {
    background-color: yellow !important;
}

HTML Code

<div id="fb-root"></div>

<div class="returnhere">
    <div class="return"><a href="/tellafriend" rel="shadowbox;width=611;height=453" target="_blank">Invite via email</a>

    </div>
    <div class="return2" style="vertical-align: middle;">
        <div class="fb-send" data-href="http://compesh.com" data-font="trebuchet ms"></div>
    </div>
    <!-- <div class="return" style="vertical-align: middle;"><a href="http://www.facebook.com/sharer.php?u=https://simplesharebuttons.com" target="_blank"><img src="graphics/fbshare.png" alt="Facebook" /></a></div> -->
    <div class="return"><a href="/newdebate">Add a debate</a>

    </div>
    <!-- initialise -->
</div>
<script>
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.3&appId=299539706821986";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

I can't style it with CSS.

#u_0_3{
      background-color: yellow !important;
      left: -200px;
}
0

There are 0 best solutions below