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

Question

我希望横幅图像的位置在较小的屏幕上更改-最大宽度414px。 我想显示图像最右边的产品（建筑物）。 在更宽的屏幕上会显示建筑物。

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

这是横幅广告所在的代码（左侧位置已调整）。 我在显示代码块时遇到了困难，所以我希望这些足够了：

代码截图

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

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

如何在媒体查询中定位此元素以使其正常工作）

我创建了一个媒体查询：

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

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

}
</style>

该网站为https://utestua.no/

提前致谢 ：）

Answer 1

Squarespace允许您设置图像的焦点 ，以便随着屏幕尺寸和包含元素尺寸的变化，可以保留图像的特定部分。

在添加图像的地方，您会看到一个默认为图像中间的小圆圈。 该圆圈可以拖动。 在您的情况下，将其拖到建筑物所在的区域（尽管您可能希望将其垂直居中，但也可以对其进行一些操作，直到将其放到所需位置为止）。

但是，如果您确定要把焦点放在中间，但要通过CSS覆盖位置值，则可以使用以下命令，它将保持图像的位置，以便始终可见右侧：

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