Блог

URL сайта: удален

Привет,

как я могу сделать свою целевую страницу в Squarespace адаптивной к различным размерам экрана с помощью CSS? Это вполне подходит для мобильного просмотра, рабочего стола и больших экранов. Но это не выглядит хорошо между настольным и мобильным просмотром. логотип становится слишком большим или баннер занимает не всю ширину, поэтому он обрезается с правой стороны (см. Снимки экрана).

Кто-нибудь знает, какой код мне нужен, чтобы показать баннер во всю ширину и чтобы логотип (изображение) в разделе баннера не становился слишком большим при определенном размере экрана?

Спасибо за помощь!

Для устранения этой проблемы у вас есть следующие варианты:

1. Удалите цифры / текст справа от изображения и загрузите новое изображение без цифр / текста. Затем добавьте цифры / текст с помощью блока кода и используйте CSS, чтобы полностью расположить его в разделе, привязав его к правой стороне.
2. Установите точку привязки изображения полностью вправо. Это позволит постоянно видеть цифры / текст и не обрезать его. Однако это означает, что здания часто не будут видны, и я предполагаю, что здания являются фокусом, поэтому, возможно, это не очень хороший вариант.
3. Немного переделайте графику, чтобы цифры / текст справа были дальше влево, плавая ближе к середине, избегая обрезки на большинстве устройств до того, как произойдет переключение на мобильный, и раздел будет скрыт в пользу раздела для мобильных устройств.
4. Используйте CSS, чтобы полностью переопределить фокусную точку и принудительно привязать изображение к правой стороне, вот так:

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