KH-WEBLOG TOP > WEBメモ > CSS > Instagramの投稿埋め込み時にスマホで表示がはみ出る場合の対処法

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;
  }
}

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

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP SEO WordPress アイキャッチ画像 アクセス解析 カテゴリー カラーミーショップ カート コメント ショートコード ソースコード タグ テンプレートタグ ドロップダウンメニュー パーマリンク ビジュアルエディタ フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事