• 文字サイズ


解決済

CSSでOS別対応について

  • 相談者:非公開
  • 2019/07/12 18:01
お世話になっております。
楽天とヤフーに商品の特集ページをゴールドを使って作成したのですが、
アイフォンで見たときにバックカラーをフルスクリーンで指定している部分が
横に伸びてしまう現象が発生してしまいました。
パソコンやアンドロイド(確認した端末はエクスペディア)では問題なく、
横に伸びることはありませんでした。
何度かコードを書き換えたりしてみましたが直りませんでした。
アイフォンに対応させるになにか専用のコードなどが必要なのでしょうか?

バックカラーを指定している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

お手数おかけしますが、アドバイスのほうお願いいたします。
キーワード:CSSgoldiPhone楽天Yahoo
投稿内容について報告する

今気になってる疑問、
セミナーに参加すれば解決するかも!?
日本全国のネットショップ12,000社が参加!
ネットショップでお悩みがある方はまずはオンラインセミナーへGO!
広告0円で楽天の売上アップ続出!
ECマスターズチャンネルをチェック!
総視聴回数15万回突破!
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください!

  • 返信者:非公開
  • 2019/07/12 19:41
ECマスターズの伊藤です。

> 楽天とヤフーに商品の特集ページをゴールドを使って作成したのですが、
> アイフォンで見たときにバックカラーをフルスクリー………(省略)………
  • 返信者:非公開(質問者)
  • 2019/07/15 09:18
ご回答ありがとうございます!
教えていただいたコードを追加しましたら、
バックカラーが横に伸びなくなりました。
ありがとうございます。………(省略)………
このフォーラムへの質問は終了しました