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

個人開発歴5年以上。サイト開発・運営。 ペアでエンジニアとアプリ開発しています。

このサイトではWEBデザイン初心者向けになるべく分かりやすいように解説したり、WEBデザインの便利ツール紹介、開発したりしています。

note