Question

我目前正在努力使网站响应。但是，我遇到了一个我似乎无法弄清楚的问题。

因此，当您通过手机访问网站或者只是扩展浏览器时，大部分内容（尚未完成）都可以正常扩展。你可以看到主页上的元素都具有相同的宽度。因为我使用了Width 100％CSS属性。

但是，它仍然可以向侧面滚动，有一个大背景的东西挡在路上，我无法弄清楚是什么，我的元素检查员似乎甚至没有把它作为一个元素或任何东西。我一直在寻找它是什么，我想也许它是一个jQuery的东西，但实际上没有任何我尝试过的东西似乎工作。我也尝试了不同的视口，但这似乎不起作用..

有人知道这里发生了什么吗？提前致谢。

更新：

感谢大家的帮助！ #access ID。仍然有970px的宽度。我把它设置为100％，它现在已经修复了！

Answer 1

首先需要在<head>区域中指定视口。这将使响应能够正常生效。

<meta name="viewport" content="width=device-width, initial-scale=1">

在此处阅读有关视口的更多信息：MDN

除此之外，由于他们在style.css文件中设置了宽度，因此您需要将几个元素添加到响应式CSS中。

@media screen and (max-width: 800px) {
    #access {
        width: 100%;
    }
    #footer-sidebar { 
        padding: 5%;
    }
}

Answer 2

尝试删除style.css上的宽度 #access {}

编辑：#access { /* width: 970px; */ margin: 9px auto 0; position: relative; z-index: 500; }

Answer 3

从此伪类选择器中删除点

.widget:after, #menu-footermenu:after, .clearfix:after {
  content: "";
}