基本 CSS 不 Responsiveness/Mobile 友好

Question

我正在尝试弄清楚如何将此基本 CSS 移动 friendly/responsive 更改为浏览器 window。目前，代码在除水平平板电脑之外的所有尺寸下都能正常显示。通常图片和代码会下拉到不同的行，但由于某种原因，所有内容都显示在一行上并延伸到页面边界之外。我已经尝试了从 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%。如果你给它们一个固定的宽度（比如 320 像素），它们不会自行折叠，但会在调整大小时向下浮动到下一行。

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

基本 CSS 不 Responsiveness/Mobile 友好

Basic CSS Not Responsiveness/Mobile Friendly

html

css

squarespace