【レスポンシブ】ツイッター埋め込みウィジェットiframeの横幅がはみ出る問題を解決する方法【css/WordPress】

色々な記事を読んで試してみても、結局iphoneで見たらツイッターのタイムラインの埋め込みの横幅が画面をはみ出ちゃってることがよくあるので、ここに備忘がてら書いておきます。

これでスマホでTwitter埋め込みがはみ出ない！

サンプルコード

html

<div class="twitter-wrap">
<a class="twitter-timeline" href="https://twitter.com/[アカウント名]?ref_src=twsrc%5Etfw">Tweets by [アカウント名]</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

css

.twitter-wrap{
	width: 600px;
	margin: 0 auto;
}
@media (max-width: 780px) {
  .twitter-wrap{
		width: auto;
    overflow: hidden;
  }
  .twitter-wrap iframe{
    /* 20pxの部分は埋め込んだタイムラインの左右に必要な余白の総計を記載 */
    width: calc(100vw - 20px)!important;
  }
}

ワードプレスとか関係なくどこでも使えるのでオススメ！

コメントで質問あれば答えます。

今日の人気記事

• 48グループからAV女優になった元アイドルメンバーまとめ【AKB・SKE・HKT・NMB】
• 世界のおもしろい言語！かっこいい・かわいい文字がたくさん
• アニメ・ゲーム・漫画のタイトル風ロゴジェネレーターまとめ！簡単ロゴ作成
• 【2021年】YouTube動画ダウンロードサイト5選【保存方法】
• スパムコメント？「Muchas gracias. ?Como puedo iniciar sesion?」【ブロックの仕方】
• なぜ米津玄師はパクリと言われるのか？ 似ている曲やルーツを解説！【初期から2021年まで】
• ニコニコ動画のサムネ画像をダウンロード保存する方法【大サイズURL取得】
• 英語のエラーメールの意味・解説一覧（failure notice、MAILER-DAEMON）
• シングル・ダブル・トリプルの次は？クワトロ？
• おすすめ冬の歌25選！邦ロックバンド冬ソング特集！定番からマイナーまで