Topページ（sp表示時）の右側に大きな余白が生まれてしまう。

日本語 ディスカッション 技術的なQ＆A
1

SPにてTOPページにアクセスすると、右側に大きな余白が生まれてしまいます。

スクロールしある箇所に到達すると余白が消え、リロードするとまた余白ができます…。

下層ページでは同様の問題は起きておりません。

該当URL：https://gift-the-connrod.jp/（SPでアクセスしてください）

使用テーマ：Empire (https://pixelunion.net/products/empire)

これまでに行ったことは以下になります。

①テーマ提供会社への問い合わせ

テーマの提供元へ問い合わせし、確認をしてもらいました。

調査の結果、テーマ側の問題ではないと返答をもらいました。

②似たような事例の確認・調査

コミュニティにて似たような現象を相談されているQ&Aを見つけ、検証ツールから確認をしてみたのですが、原因となっているセクションなどは見つけられず…。

https://community.shopify.com/c/%E7%B7%8F%E5%90%88%E7%9A%84%E3%81%AA%E3%83%87%E3%82%A3%E3%82%B9%E3%82%AB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3/%E5%95%86%E5%93%81%E7%B4%B9%E4%BB%8B%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AB%E4%BD%99%E7%99%BD%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99/m-p/1802849

ちなみに、外部に頼らずに非エンジニアのみで内製して作っております…。

原因や解決方法など、ご助言いただけると大変ありがたいです。

2

@tm_106 様

ご質問いただいている、SP時に右側に余白が出る件ですが、有料テーマのため出力されているHTMLからの推測となりますが、考えられる原因としましては下記youtubeの動画表示設定で横幅を560pxで表示しようとしているため、初期表示時に右側に余白が出てしまっているのではと思われます。

対象のコード

上記コードを下記のように変更されましたら、問題が解決するかもしれません。

実際の検証はできておりませんので、問題が解決しない場合やPCでの見た目に影響が出る場合もありますので、その際は元に戻していただければと思います。

ご参考まで。

（キュー小坂）

3

ありがとうございます。

試してみたところ、余白がなくなり、PCでも問題なく表示できました。

iframeをYoutubeからそのままコピペしていたのですが、全く盲点でした…。

ご助言いただきありがとうございました！！