Question

Ist driving me crazy!!! I’ve played around with everything!

here is the widget css

.fan_box a:hover{text-decoration: none;}
.fan_box .full_widget{height: 298px; border: 0 !important;background: none !important;position: relative;padding-left:10px !important;margin-left:0px !important;}
.fan_box .connect_top{background: none !important;padding: 0!important;}
.fan_box .name_block{color:#fff !important;}
.fan_box .connect_action{padding: 0 !important;overflow:hidden !important;color:#fff !important;}
.fan_box .connections{padding: 0 0 0 0px !important;border: 0 !important;font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: bold;color: #fafafa;margin-left:0px !important;}
span.total{color: #eee;font-weight: bold;}
.fan_box .connections .connections_grid {padding-top: 10px !important;}
.fan_box .connections_grid .grid_item{padding: 0 7px 10px 0 !important;}
.fan_box .connections_grid .grid_item .name{font-family: "lucida grande",tahoma,verdana,arial,sans-serif;font-weight: normal;color: #fff !important;padding-top: 1px !important;}
.fan_box .connect_widget{margin: 0 !important;}
.fan_box .connect_widget .connect_widget_interactive_area {margin: 0 !important;}
.fan_box .connect_widget td.connect_widget_vertical_center {padding: 0 !important;}
.fan_box .profileimage {padding-left:0px !important;}
.fan_box .connect_action .name{color:#fff !important;}

here is the PHP

<div class="col-wrapper facebook">
    <h3 class="tab"><?php echo $title;?></h3>
        <div class="col">
            <div style="overflow:hidden; width:208px; height:265px;margin:0 auto;padding-left:10px;">
            <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<?php echo $profile_id;?>&amp;width=244&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=272" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:244px; height:418px;margin:-8px auto 0 -20px!important;"  allowTransparency="true">
            </iframe>
        </div>
    </div>
</div>

Any help is greatly appreciated. I’m stuck!

Thanks

Answer 1

The Facebook iframe widget is notorious bad to work with, check the inline style on the iframe and you’ll notice:

width:244px; height:418px;

There is also a height/width defined in the URL of the Iframe.

src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<?php echo $profile_id;?>&amp;width=244&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=272"

Changing these might help out.