如何使橫幅部分中的橫幅和圖像響應不同的屏幕尺寸（例如平板電腦）

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; }