How to change height on Facebook like box widget (iframe)?

11,903

Just set height on the <iframe> using !important.

Demo: http://jsfiddle.net/ThinkingStiff/TpZ9k/

#facebook-likebox-3 iframe {
    height: 200px !important;
    border-bottom: 1px solid #AAA !important;
}​
Share:
11,903
Rick Smith
Author by

Rick Smith

Updated on June 04, 2022

Comments

  • Rick Smith
    Rick Smith almost 2 years

    I am trying to change the height of the facebook like box widget on the sidebar of my site, however I can't seem to figure out what css to target in order to do this. I'd like to change it about 200. Here is the current code being used. Any ideas?

    </div><div id="facebook-likebox-3" class="widget widget_facebook_likebox"><h4 class="Facebook Like Box widget-title"><a href="http://www.facebook.com/noahsdadcom">Like Us On Facebook</a></h4><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnoahsdadcom&#038;width=300&#038;height=432&#038;colorscheme=light&#038;show_faces=true&#038;stream=false&#038;header=false&#038;force_wall=false" scrolling="no" frameborder="0" style="border: none; overflow: hidden; width: 300px; height: 432px; background: #fff"></iframe></div><div id="text-43" class="widget widget_text">            <div class="textwidget"><div id="cse-search-form" style="width: 100%;">Loading</div>
    
    • AdityaSaxena
      AdityaSaxena over 11 years
      You cannot edit an iframe's css unless you're the one who controls it. Since Facebook controls this iframe, there's no way you can edit it's CSS.
    • Rick Smith
      Rick Smith over 11 years
      @AdityaSaxena Actually there is a way to do it. Check out the answer below. It worked perfectly. :)