Responsive Facebook Social Plugin

With the web getting more advanced every day, the behavior of the websites has also been changed. Now webmasters/developer prefer to develop responsive websites which are future secure about the presence in different types of media like computers, tablet, mobile, etc. It is the magic of CSS which makes this possible.

For different types of media, a different set of the layout is defined in the CSS which applies accordingly to the host media. Thus we can browse a responsive website in any media with any hassle with just different layouts.

Below is the method described through which we can make the Facebook Comments plugin responsive so that it will not misalign the responsive website.

First of all, apply the social plugin code of Facebook Comments on your page. After that apply the following style so that it will apply the rules after the default Facebook CSS:

.fb - comments,
.fb - comments span,
.fb - comments.fb_iframe_widget span iframe {
	width: 100 % !important;
}

Take care of the location of the application of the above style and also the loading pattern of the CSS file.