スマホページHTMLについて

Question

お世話になります。
何回かご質問させて頂いていますが
楽天goldにてスマホページを作成している初心者です。

https://www.rakuten.ne.jp/gold/xxx/top/index_sp.html

いくつかつまずいてしまったので、
ご質問させていただきたいです。

①スライドの上の横スクロールメニューが、
固定バーに隠れてしまっているところを表示させたいです。

②ランキングの３つをページの中央揃えにしたいです。
（現在、少し左寄り？）

ご回答宜しくお願いいたします。

Answer

すみません、
あと１つご質問です。
スマホページでドロワーメニューを付けたいと思い、
過去投稿を拝見させて頂いていたら下記URLに辿り着きました。

http://kanri.nkdesk.com/homepage/sample3.php

こちらを参考に作成したのですが
スマホのchromeアプリブラウザで見ると
ちゃんと表示されるんですが、
スマホの初期ブラウザ（Safari？）で見ると
チェックボタンのまま表示されてしまいます。
何が原因なのでしょうか…
お忙しいところ恐れ入りますが
併せてお答えいただきますと助かります。

Answer

ECマスターズの田中です。

> ①スライドの上の横スクロールメニューが、
> 固定バーに隠れてしまっているところを表示させたいです。

たとえば、
.scroll-nav に対して margin-top: 89px; を指定するなど、
固定バーのぶんだけ、ページ上部に余白をご設定ください。

> ②ランキングの３つをページの中央揃えにしたいです。
> （現在、少し左寄り？）

ランキングを囲むulに、右側の余白-2%が設定されており
若干強引な方法ではございますが、
問題なく中央揃えになっておりました。

右側の商品の横幅が狭いことにより
左寄りに見えている可能性がございますので、
どうしても気になる場合は、
３枚とも１色だけでベタ塗りした画像に置き換える、
などの方法でご確認いただきますようお願いします。

> スマホの初期ブラウザ（Safari？）で見ると
> チェックボタンのまま表示されてしまいます。

とのことですが、
私のiPhone8にて「index_sp.html」を確認しても、
特に生のチェックボックスらしき表示は
確認できませんでした。

現在も問題は継続しておりますでしょうか。
実際に表示されているスクリーンショットなど、
詳しい情報をお知らせいただきますようお願いします。

Answer

お世話になっております。
①、いただいたタグを入れたところ解決致しました。
②③、お騒がせしました。
（③については本日サイトを見てみると直っていました。
キャッシュが残っていたのかもしれません。）
お忙しいところ丁寧にお答えいただき感謝しています。
ありがとうございました。