html - CSS在较小的设备上显示错误

.foot-1, .foot-2, .foot-3 .foot-4 {
float: left;
width: 25%;
max-width: 25%;
min-width: 25%;
}

.foot-1 {

}

.foot-2 {

}

.foot-3 {

}

.foot-4 {

}

.boxesFooterBoxes .box {
    flex: 0 0 25%;
    margin-bottom: 60px;
    box-sizing: content-box;
    max-width: 100%;
}

.boxesFooterBoxes .boxContainer {
    display: flex;
    max-width: 100%;
    overflow-x: scroll;
}

我将此代码添加到我的网站上，以正确的方式连续显示我的盒子，并且可以正常工作，但是在较小的屏幕上，浏览器将盒子彼此紧紧贴在一起。

我该怎么做才能植入我的代码并使我的盒子适合较小的设备？

测试网站：https://www.alpaka-industries.de

最佳答案

使用媒体查询针对不同的屏幕宽度使用自定义CSS

@media only screen and (max-width: 450px) { }