私はしばらくの間、自分のワードプレス サイトのレスポンシブ テーマに取り組んできました。メディア クエリを使用して画面サイズを決定し、それに応じてレイアウトを調整しています。私が今直面している問題はヘッダーにあります。画面の幅が 638 ピクセルから 1023 ピクセルになるまで、すべてが期待どおりに機能します...そのとき、ナビゲーションが予期せず画面の横に飛び出します (中央にあるはずです)。奇妙なことに、638-1023 のメディア クエリがありません。以下は重要なコードですが、私のウェブサイト ( digitalbrent.com ) ですべて見ることができます。誰かがなぜこれが起こっているのか教えてくれたら (そして私は複数のデバイスで試したので、それが私の画面だけではないことを知っています)、本当に感謝しています. 私'
CSS:
/******************************** Medium Screen Styles */
@media screen and (min-width: 481px) and (max-width: 1023px){
#titleBox {
margin-top: 38px;
width: 45%;
margin-left: 5%;
}
#siteTitle {
margin-top: 4px;
font-size: 28px;
width: 130px;
}
#tagline{
color:#FFFFFF;
font-family: georgia bold italic, serif bold italic;
font-size: 18px;
width: 210px;
text-align: center;
margin-left: 0px;
margin-top: 5px;
}
#ctaBox{
margin-top: 42px;
width: 45%;
margin-right: 5%;
}
#cta {
color: #27f231;
font-family: georgia bold italic, serif bold italic;
font-size: 18px;
float: left;
position: absolute;
top: 10px;
left: 50%;
width: 224px;
margin-left: -112px;
margin-bottom: 20px;
font-size: 18px;
}
#phone{
color: white;
font-size: 20px;
font-family: ariel, sans-serif;
padding: 16px 0;
}
#headButton{
margin: 0 auto;
width: 70%;
max-width: 322px;
text-align: center;
}
#nav {
float: left;
margin-top: 10px;
margin-bottom: 12px;
width: 300px;
left: 50%;
margin-left: -150px;
}
#nav ul li{
font-size: 10px;
display: inline-block;
list-style: none;
text-align: center;
font-family: georgia bold italic, serif bold italic;
color: white;
margin-right: 10px;
}
#nav ul li:last-child{
margin-right: 0px;
}
HTML:
<div id="header">
<div id="titleBox">
<img id="logo" height="70" width="70" src="wp-content/themes/TesterThemeX/images/web-design.jpg" alt="Web Designer Logo - Brent Blackwood" />
<h1 id="siteTitle">Brent Blackwood</h1>
<h2 id="tagline">Web & Graphic Design</h2>
</div>
<div id="ctaBox">
<span id="cta">Call Today for a FREE Quote!</span>
<h2 id="phone">(801) 4-PRO-WEB</h2>
<div id="headButton" class="ctaButton"> The CTA Button! </div>
</div>
<div id="nav" class="navScroll">
<ul>
<li id="home">
<div class="navIcon"></div>
Home
</li>
<li id="blog">
<div class="navIcon"></div>
Blog
</li>
<li id="resume">
<div class="navIcon"></div>
Resume
</li>
<li id="portfolio">
<div class="navIcon"></div>
Portfolio
</li>
<li id="lab">
<div class="navIcon"></div>
Lab
</li>
<li id="contact">
<div class="navIcon"></div>
Contact
</li>
</ul>
</div>
<div class="clean"></div>
</div>