如何使横幅部分中的横幅和图像响应不同的屏幕尺寸(例如平板电脑)

How to make banner and image in banner section responsive to different screen sizes (e.g. tablet)

站点URL:已删除

你好,

如何通过 CSS 使我在 Squarespace 上的登录页面响应不同的屏幕尺寸? 这对于移动视图、桌面和大屏幕来说非常好。 但它在桌面和移动视图之间看起来并不好。 徽标变得太大或横幅不是全宽,因此它在右侧被切断(参见屏幕截图)。

有谁知道我需要什么代码才能全宽显示横幅并避免横幅部分中的徽标(图像)在特定屏幕尺寸下变得太大?

感谢您的帮助!

您必须采取的补救措施是:

  1. 删除图片右侧的 numbers/text 并上传一张没有 numbers/text 的新图片。然后,通过代码块添加 numbers/text 并使用 CSS 将其绝对定位在该部分中,将其锚定到右侧。

  2. 将图片的锚点设置到最右边。这将使 numbers/text 始终处于可见状态并避免将其切断。然而,这意味着通常不会看到建筑物,我认为建筑物是焦点,所以这可能不是一个好的选择。

  3. 稍微重做一下图形,使右边的 numbers/text 更靠左,更向中间浮动,避免在切换到移动设备之前在大多数设备上被裁剪并且该部分被隐藏以支持移动设备特定部分。

  4. 使用CSS完全覆盖焦点并强制将图像锚定到右侧,如下所示:

    [data-section-id="5fc3e08408845d092400c576"] .section-background img {
      object-position: 100% 50% !important;
    }