アマゾンプライムデー開催中!6/22まで 

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になってしまうので、非表示にします。

【開催中】お得情報

  • このエントリーをはてなブックマークに追加