Instagramの埋め込みウィジェットをレスポンシブ化する

Instagramの埋め込みウィジェットを使用したとき、iPhone SEなどの画面幅が小さいスマホだと横幅がはみ出てしまう問題を解決します。

イメージデモ

See the Pen
Instagram Embed Responsive
by kura (@kuranopen)
on CodePen.

スクロールして動作を確認してみてください。

CSS

@media screen and (max-width: 768px){
.instagram-media{
    min-width: 100% !important;
    margin: 0 -1px !important;
    border-right: none !important;
    border-left: none !important;
}
}
  • デフォルトで指定されているmin-width100%にします
  • marginで中央に寄せます。
  • 枠線があると横幅が322pxになってしまうので、非表示にします。
  • このエントリーをはてなブックマークに追加

プロフィール

kura

WEBで食べていきたいデザイナーです。 趣味でアプリ開発(ペア、デザイン担当)やNuxt.jsやらをいじってますが、やばいな~と感じつつネットの波に取り残されないようにワカッタこと、キヅイタことをカキカキします。