CSS顯示響應的Nag Bar？

Question

我們使用名爲「Covert PinPress」的WordPress主題，它基本上是Pinterest的一個淘汰。

下面是一個例子頁：

http://shoeporn.com/iron-fist-death-dance/

的#header_banner頂部黃色橫幅可以在筆記本電腦/臺式機觀看，但不能移動設備。

很清楚，爲什麼，因爲在主題的style.css文件，它具有：

@media only screen and (min-width: 480px) and (max-width: 768px) { 
#header_banner { display: none; } 
} 

而且

@media only screen and (max-width: 480px) { 
#header_banner, #header #search {display: none;} 
} 

如果我刪除這些條目，旗幟會出現在我的Android，但看起來很糟糕。它太寬了，它與頁面上的其他對象重疊。

Screeny：

任何想法，所以它看起來在所有設備好，我如何修改CSS？在此先感謝:)

Answer 1

@media only screen and (min-width: 480px) and (max-width: 768px) { 

header_banner {width：100％; font-size：你需要/想要的尺寸！important; .nag-bar-widget {width：90％;

}}}

解釋：必須更改樣式屬性，誰給的元素的固定大小。 ！你需要重要，因爲span元素的字體大小是在html文檔中定義的。

如果有什麼不清楚的地方，請告訴我。

Answer 2

使用％而不是px，您需要使菜單響應，而不是設置爲設置的大小，因爲它在較小的設計上查看時不會相應地進行調整。上面的答案是完美的，並將工作。 與跨設計網站一起工作時，應始終使網站響應，因爲它應該跨平臺工作。 我希望這可以幫助。

 .nag-bar-widget { 
    width: 100%; 
    height: 1000%; 
    overflow: hidden; 
    } 
     #header_banner { 
margin: 0 auto; 
overflow: hidden; 
background: url(images/banner.png) no-repeat; 
position: absolute; 
left: 50%; 
margin-left: -340px; 
text-align: left; 
width: 50%; 
height: 30%; 
top: 50%; 
padding: 5px 21px 10px; 
z-index: 100; 
} 

此外，你有圖像和文本正確的div。

<div style="margin-top: auto;"> 
<a href="http://shoeporn.com/go/keen-akita-ankle-boot" target="_blank"><img src="http://shoeporn.com/wp-content/uploads/2013/11/Keen-Akita-Ankle-Boot.jpg" style="border:1px #BBBBBB solid; height:50px; vertical-align:middle; margin-right:10px;"></a> 
<span style="font-size:2em;"><a href="http://shoeporn.com/go/keen-akita-ankle-boot" target="_blank" style="color:black;">Keen Akita Ankle Boot - now on sale for $44.99!</a></span> 
</div> 

進行這些更改

.tack_entry { 
-webkit-box-shadow: 0px 1px 2px 0px rgba(34, 25, 25, .4); 
box-shadow: 0px 1px 2px 0px rgba(34, 25, 25, .4); 
background-color: #FFFFFF; 
margin: 0 auto; 
width: 80%; 
padding: 15% 10% 10%; 
margin-bottom: 20px; 
} 

也是這些變化

#header_banner { 
margin: 0 auto; 
overflow: hidden; 
background: url(images/banner.png) no-repeat; 
position: absolute; 
left: 50%; 
margin-left: -340px; 
text-align: left; 
width: 100%; 
height: 85px; 
top: 110px; 
padding: 5px 21px 10px; 
z-index: 100; 
} 

這

#logo { 
left: 50%; 
height: 16%; 
top: 2px; 
margin-left: -260px; 
position: relative; 
text-align: center; 
} 

最後

#header { 
width: 85%; 
margin: 0 auto; 
position: relative; 
} 

這應該可以解決您的問題