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

Question

站点 URL：已删除

你好呀，

如何通过 CSS 使 Squarespace 上的登录页面响应不同的屏幕尺寸？ 它非常适合移动视图、桌面和大屏幕。 但它在桌面和移动视图之间看起来并不好。 徽标太大或横幅未全宽，因此在右侧被切断（见屏幕截图）。

有谁知道我需要什么代码来全宽显示横幅并避免横幅部分中的徽标（图像）在某些屏幕尺寸上变得太大？

感谢您的帮助！

Answer 1

您必须解决的选项是：

1. 从图像中删除右侧的数字/文本并上传没有数字/文本的新图像。 然后，通过代码块添加数字/文本并使用 CSS 绝对 position 它在部分内，将其锚定到右侧。

2. 将图像的锚点一直设置到右侧。 这将始终保持数字/文本可见，并避免将其切断。 然而，这意味着建筑物通常不会出现在视野中，而且我认为建筑物是焦点，所以这可能不是一个好的选择。

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

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

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