How to make Facebook Like Button and Comments Responsive

ads

Responsive design or Adaptive? Well, Responsive design is a subset of Adaptive design concept. But anyway, if your website is Responsive, (what i will recommend), and you are facing some layout issue with Facebook Like Button or Comments, here is a CSS quick tip how to fix it!


Include this CSS code in your css file and clear browsers/site cache to test it!
Press CTRL + F5 for deep refresh.

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

Hope this will fix your Responsive layout problem! Let us know on comments for other issues!

Ref

ads
Get our hottest stories to your inbox.
Check your inbox for a confirmation email.

Have something to add to this story? Share it in the comments.

One thought on “How to make Facebook Like Button and Comments Responsive

Have something to add to this story? Share it in the comments.

Leave a Reply

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