WEB制作 シュマリ管理人 景品表示法に基づく表記：当サイトのコンテンツには商品プロモーションが含まれています。

【レスポンシブ】ツイッター埋め込みウィジェット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;
  }
}

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

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

駿河屋スタッフ募集中

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。

ABOUTこの記事をかいた人

幼少期、絵描きになりたくて毎日絵を描く。地元の写生大会で金賞受賞。
高校生の頃からバンドを組み、作詞・作曲・編曲・映像を担当。ライブで知り合ったバンドマンとは今でも仲良し。

25歳から独学でデザイン・ウェブ制作を0から学習し、ウェブデザイナーとして中途入社。自分だけの武器を探し、デザイン、マークアップ、企画、マーケティング、SNS、広告など片っ端から勉強。
今はその知識を活かしてPdMを担当。

その傍ら数々の副業（イラスト制作、アフィリエイト、古着転売、ハンドメイド、作曲）をして、現在30代に突入。

東海在住。
運営ブログ「シュマリ」は月間3万PV。
読んだ漫画は4万冊。

NEW POSTこのライターの最新記事