Есть сайт: alicegoes.com
- сделан мной с помощью приложения Mobirise, которое использует bootstrap. Прога удобная, результат качественный, но функционал ограничен. Для первой итерации - самое оно, а дальше ручками по мелочи. Например, подцепил гугл-шрифты, заменил плавающий в параллаксе текст на картинку с лого, перенес иконки соц.сетей в шапку сайта из блока в теле и т.п.
На сайте самый верхний блок (сейчас афиша) при просмотре с ПК отображается как надо. Но вот при просмотре со смартфона - отображается только середина фонового изображения, видимо потому что задано заполнение картинкой во всю высоту экрана. Соответственно, это меня не устраивает.
Так отображается с телефона (прошу прощения за масштаб, хз как уменьшить):
Вариантов решения проблемы вижу два:
1) с помощью атрибутов media и/или source выбирать какая картинка будет отображается на устройстве в зависимости от его типа 2) перезадать условие заполнения верхнего блока - не по высоте, а по ширине (не смог найти где это задано).
Первый вариант желаннее, но похоже, что без полного перетряхивания кода это не сделать, потому что картинка выбирается в атрибуте background, в который вроде как нельзя указать какой-то выбор (в отличие от picture), а при использовании picture картинка выбирается, но отображение сайта на смартфоне становится некорректным.
Еще есть мысль сделать свой section с параллаксом самому, с нуля... Но я вообще мало чего во всем этом понимаю и по сути могу только "накликать сайт мышкой") Все вышеописанные познания - результат убитых двух дней в гугле.
В общем, пожалуйста, помогите разобраться и реализовать эти идеи, буду очень признателен.
Вот ссылка на архив с сайтом: https://drive.google.com/open?id=18LaaYVzs7eJaS2vbMi21xlZ2FHkhKoGC - если у кого-то найдется время заглянуть в код или даже его поправить - будет просто офигительно!
UPD: решил добавить код
<section class="engine"></section><section class="mbr-section mbr-section-hero mbr-section-full mbr-section-with-arrow mbr-parallax-background mbr-after-navbar"
id="header1-3" data-rv-view="2" style="background-image: url(assets/images/intro.jpg);">
<div class="mbr-overlay" style="opacity: 0.1; background-color: rgb(223, 0, 0);"></div>
<div class="mbr-table-cell">
<div class="container-fluid">
<div class="row">
<div class="mbr-section col-xs-0 col-xs-offset-0 text-xs-center">
</div>
<div class="row">
<div class="mbr-section col-xs-0 col-xs-offset-0 text-xs-center">
<img alt="Alice Goes To Motherland" src="assets/images/AGTM_string_white.png" width=60%>
</div>
</div>
</div>
</div>
<div class="mbr-arrow mbr-arrow-floating" aria-hidden="true"><a href="#gallery3-5"><i class="mbr-arrow-icon"></i></a></div>
</section>