[css] How to make the Facebook Like Box responsive?

I am using the Facebook like box code in my side bar by pasting the Facebook code into a text widget. My theme is responsive, and I'd like to get the like box to resize correctly. I found this tutorial but he says the way he is doing it, isn't "fully responsive" so I didn't know if there was a better way to do it.

This question is related to css widget responsive-design

The answer is

I was trying to do this on Drupal 7 with the " fb_likebox" module (https://drupal.org/project/fb_likebox). To get it to be responsive. Turns out I had to write my own Contrib module Variation and stripe out the width setting option. (the default height option didn't matter for me). Once I removed the width, I added the <div id="likebox-wrapper"> in the fb_likebox.tpl.php.

Here's my CSS to style it:

 `#likebox-wrapper * {
  width: 100% !important;
  background: url('../images/block.png') repeat 0 0;
  color: #fbfbfb;
 -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
   -o-border-radius: 7px;
  border-radius: 7px;
   border: 1px solid #DDD;}`

NOTE: Colin's solution didn't work for me. Facebook may have changed their markup. Using * should be more future-proof.

Wrap the Like box with a div:

<div id="likebox-wrapper">
    <iframe src="..."></iframe> <!-- likebox code -->

and add this to your css file:

#likebox-wrapper * {
   width: 100% !important;

None of the css trick worked for me (in my case the fb-like box was pulled right with "float:right"). However, what worked without any additional tricks is an IFRAME version of the button code. I.e.:

<iframe src="//www.facebook.com/plugins/like.php?href=..." 
        scrolling="no" frameborder="0" 
        style="border:none; overflow:hidden; width:71px; height:21px;" 

(Note custom width in style, and no need to include additional javascript.)

The answer you're looking for as of June, 2013 can be found here:


It's accomplished using jQuery to rewrite the inner HTML of the parent container that holds the facebook widget.

Hope this helps!

NOTE: this answer is obsolete. See the community wiki answer below for an up-to-date solution.

I found this Gist today and it works perfectly: https://gist.github.com/2571173

(Many thanks to https://gist.github.com/smeranda)

Make the Facebook Like box responsive (fluid width)

This element holds injected scripts inside iframes that in 
some cases may stretch layouts. So, we're just hiding it. 

#fb-root {
    display: none;

/* To fill the container and nothing else */

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;

Colin's example for me clashed with the like button. So I adapted it to only target the Like Box.

.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] { width: 100% !important; }

Tested in most modern browsers.

As of August 4 2015, the native facebook like box have a responsive code snippet available at Facebook Developers page.

You can generate your responsive Facebook likebox here


This is the best solution ever rather than hacking CSS.

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to widget

How do I center text vertically and horizontally in Flutter? RecyclerView - Get view at particular position How to make the Facebook Like Box responsive? How to make a GridLayout fit screen size How to pass parameters to a Script tag? Is there an easy way to strike through text in an app widget? Android widget: How to change the text of a button Failed binder transaction when putting an bitmap dynamically in a widget How to clear the Entry widget after a button is pressed in Tkinter? Textarea that can do syntax highlighting on the fly?

Examples related to responsive-design

How to make flutter app responsive according to different screen size? Bootstrap 4: responsive sidebar menu to top navbar How to make canvas responsive Putting -moz-available and -webkit-fill-available in one width (css property) Bootstrap 3 - Responsive mp4-video Change hover color on a button with Bootstrap customization iOS 8 removed "minimal-ui" viewport property, are there other "soft fullscreen" solutions? Bootstrap full responsive navbar with logo or brand name text Bootstrap 3 truncate long text inside rows of a table in a responsive way Responsive Bootstrap Jumbotron Background Image