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.