CSS標識不響應移動設備上

-2

我想我已經打破了我的頁面上的CSS

標誌逃跑移動設備上的

的頁面，如果任何人都可以指出我爲什麼這不響應？

感謝

網站保羅

---------------------------css below ------------------ 

.logo-wrap { 
    background:url(images/bg-header.png) repeat-x; 
    min-height:89px; 
    position:relative; 
    } 
.logo-wrap:before { 
    content:""; 
    display:block; 
    height:100%; 
    left:-100%; 
    position:absolute; 
    top:0; 
    width:100%; 
} 
.logo-wrap:after { 
    content:""; 
    display:block; 
    height:100%; 
    right:-100%; 
    position:absolute; 
    top:0; 
    width:100%; 
} 
.logo-wrap:before { background:url(images/bg-header.png) repeat-x; } 
.logo-wrap:after { background:url(images/bg-header.png) repeat-x; } 
.logo { 
    position:absolute; 
    top:15px; 
    left:25px; 
    text-align:center; 
} 
@media (min-width: 768px) and (max-width: 979px) { 
    .logo { width:100%; } 
} 
@media (max-width: 767px) { 
    .logo { 
     position:relative; 
     top:0; 
     margin:20px 0; 
    } 
    .logo.pull-left { float:none; 
    } 
} 
.logo a { 
    filter:none !important; 
    background-color:#393939; 
    background-image:-moz-linear-gradient(top,#434343,#292929); 
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#434343),to(#292929)); 
    background-image:-webkit-linear-gradient(top,#434343,#292929); 
    background-image:-o-linear-gradient(top,#434343,#292929); 
    background-image:linear-gradient(to bottom,#434343,#292929); 
    background-repeat:repeat-x; 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff434343', endColorstr='#ff292929', GradientType=0); 
    display:block; 
    padding:14px 11px 12px 11px; 
    border-radius:6px 6px 0 0; 
} 
@media (max-width: 767px) { 
    .logo a { text-align:center; } 
} 
.logo p { 
    background:#8ec63f; 
    border-top:1px solid #fbde02; 
    font:italic 34px/1.1em 'Orbitron', sans-serif; 
    font-weight:900; 
    text-align:center; 
    padding:0 5px 5px 0; 
    color:#2c2c2c; 
    margin:0; 
    border-radius:0 0 6px 6px; 
} 
@media (min-width: 768px) and (max-width: 979px) { 
    .logo p { font-size:16px; } 
} 
.logo .logo_h__txt { text-align:center; } 
.logo .logo_h__txt a { padding:5px 15px 5px 5px; } 
.logo .logo_h__txt a:hover, .logo .logo_h__txt a:active { 
    color:#fff; 
    text-decoration:none; 
}

來源

2014-11-21 Paul Mall

您需要發佈相關代碼而不是實時鏈接。謝謝！ – 2014-11-21 21:31:17

你有兩次相同的媒體查詢......你有@media（max-width：767px）{'兩次和'@media（max-width：767px）{'兩次。把它們放在一起。（不建議修復您的問題，但完全沒有必要） – 2014-11-21 21:38:26

添加了CSS .. – 2014-11-21 22:01:48

您的圖像響應！代碼的其他部分會影響徽標。

不幸的是，我會補充說，即使在我給你這些修改來修復你的標誌後，你的網站只是不能在一定的尺寸下工作，你的網站幾乎每個手機都需要一些認真的工作在橫向模式下。不僅有重複的媒體查詢，在你的代碼中還有760px的媒體查詢（以及你的例子中顯示的767px），如果重新調整窗口的大小並不是很好，一般來說不是好的做法。

要解決該問題的標誌，...

你不需要僞元素::之前和::在.logo纏繞後。
您需要完全刪除.logo以及頂部和左側的絕對位置。
您還需要從媒體查詢「max-width：767px」中的.logo類刪除邊距。
要替換這個間距，我會添加填充：10px;到您網頁上的.span4類（上面代碼中沒有列出）
我不相信您需要< div class =「spacer」>要麼！（也不在上面的代碼中）

祝你好運在你的網站建設。

來源

2014-11-21 23:18:36 argh

只需添加IMG-響應您的標誌圖像類這樣

<img src="logo.png" class="img-responsive">

但使用引導

放在標題中的鏈接和頁腳中的腳本源

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"> 


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

參見參考

http://getbootstrap.com/css/#images

來源

2014-11-22 05:44:23 Jon

CSS標識不響應移動設備上

回答

相關問題