Instagramの投稿埋め込み時にスマホで表示がはみ出る場合の対処法 | コーディング・プログラミング・WEB制作ブログ

Instagramの投稿埋め込み時にスマホで表示がはみ出る場合の対処法

Instagramの投稿をサイトに埋め込んだ時にiPhoneやiPhoneSE等のスマホで表示がはみ出てしまう場合の対策をメモ

単純にiframeのwidthを100%にしても上手くいかなかったので調べたところ

@media screen and (max-width: 728px){
  .instagram-media{
    width:414px !important;
    max-width: 100% !important;
    min-width: initial !important;
  }
}

↑こちらのソースを追加することで解決。

案件探しに！絶対登録しておきたいクラウドソーシングサービス3選【評価と経験談】：ビジネス・副業

CSSのおすすめ参考書

これからWebをはじめる人のHTML＆CSS，JavaScriptのきほんのきほ [ たにぐちまこと ]

楽天ブックス

¥2,838 （2026/01/22 12:40時点 | 楽天市場調べ）

Amazon

楽天市場

Yahooショッピング

ポチップ