# Topページ（sp表示時）の右側に大きな余白が生まれてしまう。 **URL:** \ **Category:** 技術的なQ＆A\ **Created:** [November 7, 2023, 9:29am UTC](https://community.shopify.com/t/top-sp/266151 "2023-11-07T09:29:37Z")\ **Posts on this page:** 3\ **Page:** 1 ## AI-generated summary 主題: スマートフォン表示時、TOPページ右側に大きな余白が出る不具合。特定位置までスクロールすると一時的に消えるが、リロードで再発。下層ページでは発生せず。テーマ（Empire）提供元はテーマ起因ではないと回答。 原因・論点: TOPに設置したYouTube埋め込みiframeがwidth=560等の固定幅で初期表示され、画面幅を超えて横スクロール領域を作り余白が生じている可能性が高い。提示コード（iframeのwidth/height指定あり）が根本要因と指摘。 対応策: iframeのwidth/height属性を削除し、srcとallow系属性、allowfullscreenのみを残してレスポンシブ表示に変更。 結果・現状: 変更後、余白は解消しPC表示にも問題なし。具体的なコード修正が有効で、議論は解決済み。
**Author:** ![tm\_106](https://avatars.discourse-cdn.com/v4/letter/t/7ea924/32.png) [@tm\_106](https://community.shopify.com/u/tm_106)\ **Post date:** [November 7, 2023, 9:29am UTC](https://community.shopify.com/t/top-sp/266151/1 "2023-11-07T09:29:37Z")
SPにてTOPページにアクセスすると、右側に大きな余白が生まれてしまいます。 スクロールしある箇所に到達すると余白が消え、リロードするとまた余白ができます…。 下層ページでは同様の問題は起きておりません。 該当URL：[https://gift-the-connrod.jp/](https://gift-the-connrod.jp/)（SPでアクセスしてください） 使用テーマ：Empire ([https://pixelunion.net/products/empire](https://pixelunion.net/products/empire)) これまでに行ったことは以下になります。 ①テーマ提供会社への問い合わせ テーマの提供元へ問い合わせし、確認をしてもらいました。 調査の結果、テーマ側の問題ではないと返答をもらいました。 ②似たような事例の確認・調査 コミュニティにて似たような現象を相談されているQ&Aを見つけ、検証ツールから確認をしてみたのですが、原因となっているセクションなどは見つけられず…。 [https://community.shopify.com/post/1802849](https://community.shopify.com/post/1802849) ちなみに、外部に頼らずに非エンジニアのみで内製して作っております…。 原因や解決方法など、ご助言いただけると大変ありがたいです。 ---
**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\ **Post date:** [November 7, 2023, 10:38am UTC](https://community.shopify.com/t/top-sp/266151/2 "2023-11-07T10:38:19Z")
@tm_106 様 ご質問いただいている、SP時に右側に余白が出る件ですが、有料テーマのため出力されているHTMLからの推測となりますが、考えられる原因としましては下記youtubeの動画表示設定で横幅を560pxで表示しようとしているため、初期表示時に右側に余白が出てしまっているのではと思われます。 対象のコード 上記コードを下記のように変更されましたら、問題が解決するかもしれません。 実際の検証はできておりませんので、問題が解決しない場合やPCでの見た目に影響が出る場合もありますので、その際は元に戻していただければと思います。 ご参考まで。 （キュー小坂） ---
**Author:** ![tm\_106](https://avatars.discourse-cdn.com/v4/letter/t/7ea924/32.png) [@tm\_106](https://community.shopify.com/u/tm_106)\ **Post date:** [November 7, 2023, 10:50am UTC](https://community.shopify.com/t/top-sp/266151/3 "2023-11-07T10:50:07Z")
ありがとうございます。 試してみたところ、余白がなくなり、PCでも問題なく表示できました。 iframeをYoutubeからそのままコピペしていたのですが、全く盲点でした…。 ご助言いただきありがとうございました！！