Web開発

レスポンシブデザインでソーシャルボタン(Facebook)を入れるとレイアウトが崩れる

facebook
レスポンシブデザインでソーシャルボタン(Facebook いいねボタン)を入れると、スマートフォンで閲覧したときにレイアウトが崩れるときの対策です。 スマートフォンやタブレットが増えてきたこともあり、レスポンシブデザインのサイトが増えてきていますが、レスポンシブデザインでサイト構築したときにソーシャルボタンを入れると、レイアウトが崩れることがあります。 具体的には、画面の右端が空いてしまう現象です。 その対策です。簡単です。

レスポンシブデザインでソーシャルボタン(Facebook いいねボタン)を入れるとレイアウトが崩れる対策

CSSに以下を追記します。

[css]
#fb-root{
display: none;
}[/css]

Facebookのいいねボタンを読み込むときにレイアウトを広げてしまうようなので、その要素を表示させないようにすればOKです。 何度か躓いたので、備忘録までに。

コメントを残す