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-widthを100%にします
• marginで中央に寄せます。
• 枠線があると横幅が322pxになってしまうので、非表示にします。

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選