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），它们就不会自行崩溃，但会在调整大小时向下浮动。

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

基本CSS不响应/移动友好

1 个答案: