html - 基本 CSS 不响应/移动设备友好

Question

我正在尝试弄清楚如何使这个基本的CSS移动友好/响应浏览器窗口的变化。目前，代码在除水平平板电脑之外的所有尺寸下都可以正常显示。通常图片和代码会下降到单独的行，但由于某种原因，所有内容都显示在一行上并延伸到页面边框之外。我已经尝试了从 max/min-width 和 padding 到 position 和 overflow 的所有方法，但我可以'让这个工作起来。

这是重要的代码，其余的只是文本格式和效果。 html 是基本的，只需调用 .view

.view {
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    height: 300px;
    float: center;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff
}
.view .mask, .view .content {
    width: 300px;
    height: 300px;
    position: absolute;
    overflow: hidden;
    top: 0;
}
.view img {
    display: block;
    position: relative;
}

这一切都是通过 Squarespace 完成的，他们向我保证是我的代码导致了问题，而不是他们的模板代码。

我指的是this page上的图片。更改页面的大小，当您达到大约 4-6 英寸宽时，您就会看到我所指的内容。图片重叠并形成滚动条。单张图片之间没有间距。

Answer 1

您的图像正在重新调整大小，因为 .sqs-col-12 和 .sqs-col-4 设置为 33.3333%。如果你给它们一个固定的宽度(比如 320px)，它们不会自行折叠，但会在调整大小时向下 float 到下一行。

.sqs-col-12 .sqs-col-4 {
   width: 320px;
}