» FacebookのPage PluginでPCは小さく、スマホは100%にするレスポンシブ対応CSS｜今プラスブログ

FacebookページをWEBサイトに貼り付ける時に、使うpage plugin。 レスポンシブデザインにする場合、PCが500pxでタブレット、スマートフォンを100%にする場合は結構簡単なんですが、PCの時は240pxなど小さいサイズにしてスマートフォンの時は100%にする場合は少し工夫が必要です。 1.page pluginでは500pxで取得する Page PluginのページのWidthには500を入力して、最大サイズである500pxのコードを取得します。 参考リンク：Page Plugin 2.CSSで下記を指定する 今回はブレイクポイント(画面によってCSSが切り替わるポイント)を2つにしました。 641px以上又は641px以下かというポイントです。 @media screen and (min-width:641px) { .fb-page { width:240px !

[sutara_lumpur]

2016年7月8日現在では、この「!important」を指定する方法は使えないようです。