お世話になっております。
楽天とヤフーに商品の特集ページをゴールドを使って作成したのですが、
アイフォンで見たときにバックカラーをフルスクリーンで指定している部分が
横に伸びてしまう現象が発生してしまいました。
パソコンやアンドロイド(確認した端末はエクスペディア)では問題なく、
横に伸びることはありませんでした。
何度かコードを書き換えたりしてみましたが直りませんでした。
アイフォンに対応させるになにか専用のコードなどが必要なのでしょうか?
バックカラーを指定している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/SHOP-URL/feature/prospex/index.html
お手数おかけしますが、アドバイスのほうお願いいたします。