###前提・実現したいこと
度々すみません、該当部分のHTMLを追記してみました。
初めての質問で要領を得ずすみません、ご指摘がありましたので質問を編集しました。
(再度HTMLを追記しました。※追記※部分とソースコード、エラー表示の画像)
wordpressの海外テーマ「flash」を使用しています。
設置しているヘッダバナーが横長で、スマホから見た際、画像の縦が詰まってしまうため
スマホから見た場合のみ「横幅を短く、縦を長くした別のスマホ用ヘッダ画像」を表示させたいです。
イメージに近く、参考にさせていただいた方法はこちらです。
###発生している問題・エラーメッセージ
※追記※
上記参考サイトの方法でCSSを追記しましたが、スマホで確認すると
元のPCサイト用スマホヘッダ画像が消えず、さらにその下に
スマホ用の画像が2枚、縦にリピートしているような状態です。
わかりにくいので、画像を添付しました。
この図のスマホ用画像ヘッダが1枚表示されるのが理想のイメージなのですが、
テーマCSSに追加したのは下記部分です。よろしくお願い致します。
###該当のCSS
/* スマホのときのヘッダー画像 */ @media (max-width: 750px) { /* PC用のヘッダー画像を消す */ #wp-custom-header .wp-custom-header{ display: none; } /* スマホ用のヘッダー画像を表示 */ #wp-custom-header:after { background: url(http://★画像URL★); background-size: 100% auto; content: ''; display: block; height: 320px; } }
###該当のHTML
lang
1<div class="header-action-container"> 2<div class="search-wrap"> 3 4<div class="search-icon"> 5<i class="fa fa-search"></i> 6</div> 7 8<div class="search-box"> 9<form role="search" method="get" class="searchform" action="http://★URL★"> 10<label> 11<span class="screen-reader-text">検索対象:</span> 12<input type="search" class="search-field" placeholder="検索 …" value="" name="s" /> 13</label> 14<button type="submit" class="search-submit btn search-btn"> 15<span class="screen-reader-text">検索</span> 16<i class="fa fa-search"></i> 17</button> 18</form> 19 20</div> 21</div> 22</div> 23</div> 24</div> 25</header> 26 27<!-- #masthead --> 28<div id="wp-custom-header" class="wp-custom-header"> 29<img src="http://★PC用ヘッダ画像★" width="2000" height="521" /></div> 30 31 32 <div id="content" class="site-content"> 33 <div class="tg-container"> 34 35 36 <div id="primary" class="content-area"> 37 <main id="main" class="site-main" role="main"> 38 39 40<article id="post-2" class="post-2 page type-page status-publish hentry"> 41 42 43<div class="entry-content"> 44<h3 style="text-align: center;"> 45<span style="font-size: 14pt;">ようこそ</span></h3> 46</div> 47<!-- .entry-content --> 48 49<footer class="entry-footer"> 50<span class="edit-link"><a class="post-edit-link" href="http://★URL★"> 51<span class="screen-reader-text">"HOME"</span>の編集</a></span> 52</footer> 53<!-- .entry-footer --> 54 55 56</article><!-- #post-## --> 57 58</main><!-- #main --> 59</div><!-- #primary -->
回答1件
あなたの回答
tips
プレビュー