色々な記事を読んで試してみても、結局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;
}
}
ワードプレスとか関係なくどこでも使えるのでオススメ!
コメントで質問あれば答えます。
コメントを残す