为什么我在进行响应时会出现这个空白 <768px?

Question

当我尝试超过 768px 时，一切看起来都很好，但是当我尝试在手机中进行响应式设计时，它会产生空白问题。我不知道在移动视图中进行响应时如何出现空白。超过 768px 时看不到空白。

我能做什么？我暂时将其托管在互联网上。尝试通过小于768px，然后你可以看到空白的问题。项目链接如下：

项目链接

Answer 1

检查页脚上的类和 html，它们似乎没有响应。

检查你的 CSS 中的第 837 行

换成这个

.grid-four--cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem; /* Adjust the gap as needed */
}

@media (max-width: 1200px) {
    .grid-four--cols {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .grid-four--cols {
        grid-template-columns: 1fr;
    }
}