質問: cssでos別対応について お世話になっております。楽天とヤフーに商品の特集ページをゴールドを使って作成したのですが、アイフォンで見たときにバックカラーをフルスクリーンで指定している部分が横に伸びてしまう現象が発生してしまいました。パソコンやアンドロイド(確認した端末はエクスペディア)では問題なく、横に伸びることはありませんでした。何度かコードを書き換えたりしてみましたが直りませんでした。アイフォンに対応させるになにか専用のコードなどが必要なのでしょうか?バックカラーを指定しているcssコード↓↓/*バックイメージ*/.scene1-1_back{ /* 表示画像の高さ ÷ 表示画像の幅 × 100 */ background-color: #efd552 ; margin: 0 -500%; /* ネガティブマージンを追記 */ padding: 0 500%; padding-top: 45%; } .scene2-2_back{ /* 表示画像の高さ ÷ 表示画像の幅 × 100 */ background-color: #8fea54 ;margin: 0 -500%; /* ネガティブマージンを追記 */ padding: 0 500%; padding-top: 45%; } .scene3-3_back{ /* 表示画像の高さ ÷ 表示画像の幅 × 100 */ background-color: #5687e8 ;margin: 0 -500%; /* ネガティブマージンを追記 */ padding: 0 500%; padding-top: 45%; } .scene4-4_back{ /* 表示画像の高さ ÷ 表示画像の幅 × 100 */ background-color: #e59e57 ;margin: 0 -500%; /* ネガティブマージンを追記 */ padding: 0 500%; padding-top: 45%; }.scene5-5_back{ /* 表示画像の高さ ÷ 表示画像の幅 × 100 */ background-color: #e25998 ;margin: 0 -500%; /* ネガティブマージンを追記 */ padding: 0 500%; padding-top: 45%; }@media screen and (max-width:640px){ .scene1-1_back{ /* 表示画像の高さ ÷ 表示画像の幅 × 100 */ padding-top: 50% !important; background-color: #efd552 !important; background-size: cover; height: 100vw; } .scene2-2_back{ /* 表示画像の高さ ÷ 表示画像の幅 × 100 */ padding-top: 50% !important; background-color: #8fea54 !important; background-size: cover; height: 100vw; } .scene3-3_back{ /* 表示画像の高さ ÷ 表示画像の幅 × 100 */ padding-top: 50% !important; background-color: #5687e8 !important; background-size: cover; height: 100vw; }.scene4-4_back{ /* 表示画像の高さ ÷ 表示画像の幅 × 100 */ padding-top: 50% !important; background-color: #e59e57 !important; background-size: cover; height: 100vw; }.scene5-5_back{ /* 表示画像の高さ ÷ 表示画像の幅 × 100 */ padding-top: 50% !important; background-color: #e25998 !important; background-size: cover; height: 100vw; } }特集ページhttps://www.rakuten.ne.jp/gold/tokeiten/feature/prospex/index.htmlお手数おかけしますが、アドバイスのほうお願いいたします。
回答: ecマスターズの伊藤です。> 楽天とヤフーに商品の特集ページをゴールドを使って作成したのですが、> アイフォンで見たときにバックカラーをフルスクリーンで指定している部分が> 横に伸びてしまう現象が発生してしまいました。こちらの現象ですが、cssに、下記のコードを追加していただきますと解消することができると思いますので、ご確認くださいませ。html {overflow-x: hidden;}