Не получается сделать единый фон для 2ух блоков в мобильной версии тильда.
Создал 2 зеро-блока с единым фоном, на компьютерной версии, казалось бы, все прекрасно.
Как только переходишь на мобильную, блоки разрываются и у каждого собственный фон.
Смотрел вспомогательные видео, рекомендовано вставить блок «фон для всего сайта». Там и сделал. Но все равно на мобильной версии у каждого блока разный фон.
Помогите, как это исправить?
ТехнологииПрограммирование+3
Чтобы сделать единый фон для двух блоков в мобильной версии сайта на Tilda, вы можете использовать следующий подход:
- Создайте новый блок с прозрачным фоном, который будет объединять два блока, для которых вы хотите установить единый фон.
- Переместите два блока, для которых вы хотите установить единый фон, внутрь нового объединяющего блока.
- Установите фон для объединяющего блока. Фон этого блока будет служить единым фоном для двух вложенных блоков.
Если вы столкнулись с проблемами в мобильной версии, убедитесь, что ваши настройки блока корректно применяются для мобильных устройств. В редакторе Tilda:
- Откройте настройки блока.
- Перейдите в раздел "Настройки адаптивности".
- Убедитесь, что опция "Адаптивность" включена, и установите необходимые стили для мобильных устройств.
Если проблема не решается, можно попробовать использовать пользовательские стили CSS для управления фоном и позиционированием блоков в мобильной версии сайта. Вам потребуется добавить пользовательские стили CSS на страницу "Параметры сайта" > "Дополнительно" > "Пользовательский CSS" и применить их к нужным блокам.
Примечание: Работа с пользовательскими стилями CSS требует знания основ HTML и CSS. Если вы не знакомы с этими технологиями, рекомендуется обратиться за помощью к опытному веб-разработчику.
Пример кода
/* Замените .block1 и .block2 на классы или идентификаторы ваших блоков */
.block1,
.block2 {
background-color: transparent !important;
}
.block-wrapper {
background-color: #цвет_фона; /* Замените #цвет_фона на нужный цвет в формате HEX, RGB или RGBA */
display: inline-block;
width: 100%;
}
@media (max-width: 767px) {
.block-wrapper {
display: block;
}
}
Круто, спасибо!