html - 在 Squarespace 如何更改横幅图像的位置

Question

我希望横幅图片的位置在较小的屏幕上发生变化 - 最大宽度 414 像素。我想展示图像最右侧的产品(建筑物)。在更宽的屏幕上，建筑物出现了。

我通过更改样式中的位置使其在开发人员工具中工作:left:-1077.383px; .

这是横幅所在的代码(调整后的左侧位置)。我很难显示代码块，所以我希望这些就足够了:

Screenshot of code

查看源代码:http://digitalponddesign.com/utestua/utestua.html

在我的媒体查询中，我如何定位此元素以便在小于 414 像素的屏幕上调整左侧位置。我的目标是图像容器内容填充和第一类，但无济于事:(

我怎样才能在我的媒体查询中定位这个元素来让它工作)

我创建了一个媒体查询:

<style>
  @media only screen and(max-width:414px) {

/* not working */ 
     .image-container {
     left: -1077.383px;
    }

}
</style>

网址是https://utestua.no/

提前致谢:)

Answer 1

Squarespace 让您可以 set the focal point图像，以便随着屏幕和包含元素尺寸的变化，图像的特定部分可以保留在 View 中。

在你添加图片的地方，你会看到一个默认在图片中间的小圆圈。那个圆圈可以拖来拖去。在你的例子中，将它拖到建筑物所在的区域(虽然你可能希望保持它垂直居中，但你可以稍微玩一下它直到你把它放在你想要的地方)。

但是，如果您确定要将焦点留在中间但通过 CSS 覆盖位置值，那么您可以使用以下内容，这将保持图像定位，以便右侧始终可见:

.image-container[data-url-id='top'] img {
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
}