###前提・実現したいこと
①商品詳細ページおいて、header部分にコンテンツが重なる症状を改善したいです。
②pc以外の各デバイス(iphone6s / 6 / 5等)において、トップページの背景画像を縦横比を保ち、画像全体
がぴったり収まるレイアウトにしたいです。
③jQueryによるスライドメニューがレスポンシブデザインでは不安定な挙動を見せるため改善したいです。
質問内容が多岐に渡り恐縮なのですが、色々な方からのアドバイスを参考に勉強させて頂ければ幸いです。
よろしくお願い致します。
###発生している問題・エラーメッセージ
①個別商品を選択すると、本来青文字のヘッダーの下に商品名等の情報がくるようにmargin & paddingで調
整しましたが、そのスタイルが反映されずにヘッダー部に覆われるようにコンテンツが食い込んで重なってしまい
ます。
②Googleの開発ツールでは、背景画像に対してbackground-size:contain;を使用することで、添付写真の
ように一枚の画像が各デバイスの幅に合わせてぴったり収まっていますが、実機(iphone6)で確認すると画像
が表示されず空白になってしまいます。
③各デバイスにおいて、スライドされて表示されたメニューが収納されず、表示された状態が続いてしまいます。
開発ツールではランダムの箇所をクリックすればそれに呼応してしっかりメニューが収納される動作は確認できま
した。
###該当のソースコード
①
HTML
1 <div class="wrapper height"> 2 3 <div class="move"> 4 <div id="my-store-11819103"></div> 5 <div> 6 <script type="text/javascript" src="https://app.ecwid.com/script.js?11819103&data_platform=code&data_date=2017-07-22" charset="utf-8"></script> 7 <script type="text/javascript"> 8 xProductBrowser("categoriesPerRow=3","views=grid(20,3) list(60) table(60)","categoryView=grid","searchView=list","id=my-store-11819103"); 9 </script> 10 </div> 11 </div> 12 13 </div>
CSS
1 .height { 2 margin-top: 80px; 3 padding-top: -80px; 4}
②
HTML
1 <main> 2 <div class="top-message"> 3 <h2>Sample catchy title</h2> 4 <p>Sample description</p> 5 </div> 6 </main>
CSS
1main { 2 background-image: url("../image/top-pic.jpg"); 3 background-size: cover; 4 background-position: center center; 5 background-repeat: no-repeat; 6 background-attachment: fixed; 7 8}
③
HTML
1 <ul id="menu" class="header-right"> 2 <li class="active"><a href="#">About</a></li> 3 <li class="parent"><a href="#">Product</a> 4 <ul> 5 <li><a href="angel.html">Angel</a></li> 6 <li><a href="#">Pillow</a></li> 7 <li><a href="#">Costume</a></li> 8 </ul> 9 10 <script> 11 $("#menu li.parent").hover(function() { 12 $(this).children('ul').stop(true).slideDown('fast'); 13 }, function() { 14 $(this).children('ul').slideUp('fast'); 15 }); 16 </script>
###試したこと
①Productページでも同様の症状が見られましたが、cssをブラウザで直接開きキャッシュ強制解除を行うことで解決できました。同様の作業を行うも特に変化は無かったです。
②background-size:cover;を使用することで画像がしっかり表示されることを確認するも、
background-size:contain;で非表示の原因が特定できません。
③開発ツールと実機での動作を確認するも、同様の結果が得られず原因が特定できません。
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報