How to make Facebook Comment box responsive

How to make Facebook Comment box responsive

If you are using facebook comment widget on your wordpress website, you may probably wonder how to make it responsive so it looks more professional and cool. Facebook by default doesn’t provide a responsive layout by default, but today I’ll show you how to make your facebook comment box responsive with some CSS tricks, no additional javascripts required.

HTML tags

First you’ll have to get your HTML tags of facebook comment from their developer tools page.¬†In the settings field, remember to set the width to 100%. This is essential¬†for our CSS tricks.

 

fb-comment-settings
Set “width” to 100%

After click the “Get Code” button, we’ll use the “HTML5” method and paste the codes somewhere of your theme files.

CSS tricks

Here comes the magic. Just paste following css codes to your styles.css or other styling files.

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

You are all set now. Check your facebook comment form by re-sizing your browser, it should be responsive now.

Save

Author: Leo

My name is Leo who’s behind this blog. I’ve been working with wordpress since 2010. I’ll write about themes, plugins, tutorials and all about wordpress here. Hope you find it useful!

Leave a Reply

Your email address will not be published. Required fields are marked *