FacebookのLikeboxをレスポンシブ対応に

Facebook の Likebox を表示する際に、設置したままでは固定の幅となってしまいます。

今回は CSS だけで Likebox をレスポンシブに対応させる方法を載せておきます。

Likebox は、iframe が表示されているため固定幅となっています。
そこで、CSS に下記のような記載を追加し読み込ませることでレスポンシブなページにも対応することが出来るようになります。

コード
所感

コード

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

所感

CSS の奥の深さと言うか、便利さを更に感じさせられた1日でした。