Facebookライクボックスの横幅をスマホサイズ100%に!

LikeBoxはみ出してませんか?

fb-likebox

フェイスブックページを運営されている方なら、通常WEBサイトにライクボックスを設置されていると思います。

ただ、サイトをいわゆるレスポンシブデザインにされた場合、ブラウザ幅を狭く(=スマホなどで表示)した際に、ライクボックスが横にはみ出してしまうことが多々あります。

これは、LikeBoxを構成しているパーツの横幅が、px指定で固定されているせいです。

そんな場合、スマホ表示用のCSSに、次のソースを追記してみていただければと思います。

※以下は2014年9月時点の情報です。
FaceBookはマイナーチェンジが多いため、いきなり内容が通用しなくなるケースもございます。

ライクボックスの横幅を100%に指定するスタイル

上記を、スマホ表示幅のメディアクエリ内に追記しましょう。

また、左右に余白などを儲けたい場合は、

width: 98%;
margin-left: 1%;
margin-right: 1%;

などの指定を行えば、よろしいかと思います。

記事をシェアする

  • Tweetする
  • FaceBookでシェアする
  • はてブにBookmarkする

Tags


Trackbacks & Comments

Trackback URL for this post:

Leave a Reply

flight