Question

.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

Answer 1

使用媒体查询将自定义css用于不同的屏幕宽度

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

Answer 2

尝试使用bootstrap以获取以下网站开放链接的响应能力：

Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.

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

2 个答案: