スマホのフロートバナーの幅について

Question

いつもお世話になっております。
他の方のフォーラムを見てスマホのフロートバナーを入れたのですが、
幅が広くて、アプリ経由で見ると商品ページの見える幅が狭くなっています。
この幅を狭くするにはどうすればいいでしょうか？
画像幅を狭くしたのですが、変わらないので教えてください。
下記を入れてます。よろしくお願い致します。


#spFloatHeader {
display: block;
position: fixed;
left: 0;
top: 0;
z-index: 2;
width: 100%;
}
#rstTopSearch, #ipnsh-header, #topFuncShopPopup {
position: relative;
z-index: 3;
background-color: white;
}

Answer

ECマスターズの田中です。

> この幅を狭くするにはどうすればいいでしょうか？

「sp _float.html」内で読み込んでいる
「sp.css」にて、まずは
.header_menu li img
への規則に、
vertical-align: bottom;
上記プロパティの追加をお願いします。

次に、
.header_menu li
に設定されている
padding: 15px 0px;
の「15」が、灰色部分の広さを示しておりますので、
ご希望の幅になるまで小さく修正していただきますようお願いします。

この修正で、見た目については修正することができますが、
「sp _float.html」を埋め込むためのiframeタグに高さが設定されていないため、
Androidで確認すると、スクロールのできない透明な部分が出来てしまいます。
まずはAndroidの実機にて、動作のご確認をお願いします。

また、「sp _float.html」のファイル名につきましては、
「sp_float.html」のように、
ファイル名のスペースを詰めていただくことをオススメします。

「sp _float.html」のURLを直接ブラウザのアドレス欄に入れて
アクセスしていただくと、末尾が
sp%20_float.html
になることがおわかりいただけるかと思います。

ファイル名内に半角スペースを記載するのは
本来不自然なため、このようにエンコードと呼ばれる処理が必要となり、
また記載ミスを誘発しやすい構造となっております。

Answer

田中様
ご返答ありがとうございます。

＜「sp.css」にて、まずは
.header_menu li img
への規則に、
vertical-align: bottom;
上記プロパティの追加をお願いします。
.header_menu li
に設定されている
padding: 15px 0px;
の「15」が、灰色部分の広さを示しておりますので、
ご希望の幅になるまで小さく修正していただきますようお願いします。＞

すみませんが、知識不足で入れ方が悪いのかうまくいきませんでした。
padding: 15px 0px;　と指示している箇所がありませんでしたので、入れてみましたがダメでした。
HTMLを添付しますので、どこに入れたらいいか　教えて頂けますか？
問題なければ、こちらに公開してもかまいませんので、ご指示お願い致します。

半角の件　ありがとうございます。　修正しました。
よろしくお願い致します。

Answer

ECマスターズの田中です。

「sp_float.html」自体ではなく、その中で読み込んでいる「sp.css」、つまり
https://www.rakuten.ne.jp/gold/*********/css/sp.css
を修正していただく必要がございます。

お手数ですが今一度、
「sp.css」ファイルの内容の確認および修正をお試しください。
出来ない場合は改めてご返信いただきますようお願いします。

Answer

田中様
ありがとうございます。
CSSは業者に頼んだので触ったことなくドキドキでしたが出来ました！
ご丁寧な対応　感謝致します。