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;
  }
}

+++ ADDED +++

我正在尝试移除显示在移动设备上的Home Services Portfolio下面的一行（屏幕截图：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，看起来很像边框。

只需将box-shadow: none和border-bottom: none一起分配到您的css代码中即可解决此问题。

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

移动设备特定CSS无法正常工作

2 个答案: