楽天PCのフローティングバナーについて

Question

お世話になっております。
セール時期になるとPC表示のセール特集ページへ案内するフローティングバナーや店舗発行クーポンを出していますが、デバイスにより（タブレットなどの画面サイズの小さいもの）、表示が被ってしまいます。
表示期間も限定している為、なんとなくそのままにしておりましたが、被らずに表示させるにはどうすればいいでしょうか。

Answer

ECマスターズの伊藤です。

> 表示期間も限定している為、なんとなくそのままにしておりましたが、被らずに表示させるにはどうすればいいでしょうか。

下記のCSSを追加していただきますと、バナーが被らずに表示することができます。


body{
body{min-width:1200px;}
}


なお、バナーが表示されていない場合
余白ができますので、気になる場合は、
バナーが表示されているページにのみ
対応していただきますよう、お願いいたします。

1200pxの数字は、バナーの横幅に合わせて、
調整していただきますよう、お願いいたします。

Answer

ノートPCでみると左に表示させているフローティングバナーが縦に見切れてしまいます。
こちらを縦横、被らず表示させたい場合は、
body{
min-width:100px;
min-height:800px;
}
という表記でいいのでしょうか。今現在上記のように記述しておりますが、デスクトップモニターで確認しても良くわかりません。またウィンドウサイズも縮めてみたりして表示確認しましたが、普通に隠れてしまいます。

Answer

ECマスターズの伊藤です。

> 今現在上記のように記述しておりますが、デスクトップモニターで確認しても良くわかりません。またウィンドウサイズも縮めてみたりして表示確認しましたが、普通に隠れてしまいます。

position:fixedをご指定頂いてますので、
body{
    min-width:100px;
    min-height:800px;
    }
をご指定頂いても、バナーのやサイズは位置は変化いたしません。

そのため、画面の高さがある程度の高さになったら
画像サイズを小さくするよう、CSSにて設定することで、
ご対応いただく必要がございます。

CSSは、下記の通りとなります。

@media screen and (max-device-height: 720px){
#point10 img{
height:calc(100vh - 180px);
}
}

現在、#point10 img
のご指定を頂いていると思いますので
これより下に記述していただきますよう
お願いいたします。