wordpressの固定ページにfacebookの投稿を埋め込む作業をしているのですが、タブレット表示にすると掲載にズレが生じてしまいます。
3つのfacebook投稿を横3列に表示したいため、プラグイン【Page Builder by SiteOrigin】を使って作成しています。
再現したいイメージ↓
facebookの埋め込み投稿を、コードジェネレーターでコードを取得し、IFrameでページビルダーのカラム内にそれぞれ貼り付けました。
投稿の横幅は350pxで指定し、コードを作成しました。(下記facebookの埋め込みコード例です)
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2F20531316728%2Fposts%2F10154009990506729%2F&width=350&show_text=true&height=328&appId" width="350" height="328" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="e![イメージ説明](617d298c6e6a473b2e960e281823ad2e.jpeg)ed-media"></iframe>
PCとモバイルでの読み込み時にはイメージ通りに表示されているのですが、タブレットではカラムからはみ出たサイズになってしまい、重なって表示されてしまいます。
横幅350pxの指定が固定されているということでしょうか。
問題の図↓
試した対処↓
- IFrame内のwidthを100%に、heightをautoに書き換えた。
⇒widthが350px-750pxにしか対応していないらしく、タグ自体が作動しなくなった。
- ページビルダーのそれぞれのカラムにmax-width:100%;を記述した。
⇒変化なし
- ページビルダーのそれぞれのカラムにbox-sizing: border-box;を記述した。
⇒変化なし
色々調べたいく中で、JavaScriptを使用すると解決できるかも、という策があったのですが、JavaScriptについて詳しくないため、他の方法で対処できないかと試行錯誤しているのですが見つからず。
cssの追記などで解決できる方法がありましたらご教授ください。
あなたの回答
tips
プレビュー