タブレットで縦バナーが右端に表示されない

Question

お世話になっております。

縦バナーを両側に表示したいので、
以下のように設定しました。

PCではきちんと出ますが、タブレットでは
右端からかなりずれて表示されます。

どのように解消すればいいかアドバイス
よろしくお願いいたします。

XXX、YYYは伏字に、YYYは140ｘ999ピクセルの画像です。

（ソース）



.vbanner {
position: absolute;
min-height: 100%;
top: 100px;
width: 140px;
background: url(YYY) repeat-y scroll;
left: 0px; /* 画面左端とバナーの間隔（画面右端の場合はrightに変更してください） */
z-index: 1; /*重なり順の設定。ページ内他のパーツより上に出したい時は数字を増やす */
height: 6000px; /*縦バナーの高さ。ページの長さによって調整してください */
visibility: visible; /*縦バナーの表示・非表示（hidden＝消す、visible＝見せる）*/
}
.vbanner a {
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
}

/*小さいモニタの場合非表示にする（一行下の1220を変更して調整可能）*/
@media screen and (max-width: 1220px) {
.vbanner {
visibility: hidden;
}
}






.vbanner2 {
position: absolute;
min-height: 100%;
top: 100px;
width: 140px;
background: url(YYY) repeat-y scroll;
right: 0px; /* 画面左端とバナーの間隔（画面右端の場合はrightに変更してください） */
z-index: 1; /*重なり順の設定。ページ内他のパーツより上に出したい時は数字を増やす */
height: 6000px; /*縦バナーの高さ。ページの長さによって調整してください */
visibility: visible; /*縦バナーの表示・非表示（hidden＝消す、visible＝見せる）*/
}
.vbanner2 a {
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
}

/*小さいモニタの場合非表示にする（一行下の1220を変更して調整可能）*/
@media screen and (max-width: 1220px) {
.vbanner {
visibility: hidden;
}
}

Answer

ECマスターズの田辺です。

@media screen and (max-width: 1220px) {
.vbanner {
visibility: hidden;
}
}
が２つ記述されておりますので
一番下の.vbannerは.vbanner2にご変更ください。

そして、 (max-width: 1220px) ですとタブレットでは表示されないようになりますが
タブレットで縦バナーを表示させたいということでしょうか。

その場合、値を768pxにしていただく必要がございますが、
タブレットで縦バナーが表示されますと
お客様が商品を見づらいと感じる可能性もございますのでご注意くださいませ。