特定於移動設備的CSS無法正常工作

Question

我正在嘗試添加以下針對移動設備的標頭，但未生效

#header{
  width:100%;
  padding:25px 0 20px 0;
  border-bottom:1px solid #ddd;
  position: fixed !important;
  overflow: visible;
  top: 0;
  left: 0;
  margin:0;
  z-index: 99;
}

/* Diable border bottom on Mobile Devices */
@media only screen and (max-device-width: 480px) {
  #header {
    border-bottom:none;
  }
}

+++添加+++

我試圖刪除在移動設備上的“家庭服務組合”下面顯示的一行（截圖： http : //imgur.com/Q4pTNMG ），該行在計算機屏幕上效果很好。 網站是：modcansolutions.ca

Answer 1

編輯：嘗試刪除-device ：

/* Diable border bottom on Mobile Devices */
@media only screen and (max-width: 480px) {
  #header {
    border-bottom:1px solid #ddd;
  }
}

編輯2：您實際上沒有分配任何新內容。 您的樣式與原始樣式相同。 border-bottom:1px solid #ddd; 也在原始CSS中。

Answer 2

該行不僅是由border-bottom屬性引起的，而且還有boxshadow類，它提供了一個box-shadow ，看起來很像一個邊框。

只需在您的CSS代碼中分配box-shadow: none和border-bottom: none ，它就可以解決此問題。

@media only screen and (max-width: 480px) {
    #header {
        border-bottom: none;
        box-shadow: none;
    }
}