为什么我的网站的导航和顶部在平板电脑上被推到了右边？

Question

如您所见，顶部和导航的背景在平板电脑上被推到左侧。可能是什么问题？

CSS：

#header {
  background: #FFF;
  height: 69px;
  overflow: visible;
  border-bottom: 1px solid #ccc;
  padding-top: 29px;
  -webkit-box-shadow: rgba(0,0,0,0.2) 0 0 8px;
  -moz-box-shadow: rgba(0,0,0,0.2) 0 0 8px;
  box-shadow: rgba(0,0,0,0.2) 0 0 8px;
  z-index: 9999;
}

.section-gray {
  background: #f7f7f7;
  padding: 20px 0;
  position: relative;
}

META：

<meta name="viewport" content="width=device-width">

直播网站：http://www.m2comm-semi.com/

Answer 1

与你的断点有关。第一个设置为 767px ：

@media handheld, only screen and (max-width: 767px) {
  .container {
    width: 100%;
  }
  etc.
}

您需要添加更多断点以允许可能大于767px的设备。

Answer 2

您应该改进小型设备的风格，但为了解决这个问题，您可以按照自己的风格添加它。

#signage .container > img {
    margin: 20px 0 0;
    // Add max-width
    max-width: 100%;
}

@media screen and (max-width: 960px) {
  .container {
    width: 100%;
  }

  #header
  {
    height:auto;
  }
}