set34

Здравствуйте! http://nds.nika-llc.pw/ Проблема следующая. Друг попросил адаптировать под мобильные устройства сайт. Все работает, НО: На главной странице есть заголовок, который масштабируется. И на маленьком экране просто исчезает. Я решил сделать просто: сделать скриншот экрана и добавить его вместо текста, который не получается масштабировать. Логика такая: на большом экране текст работает, видео фоном тоже. На маленьком экране видео и текст отключаются (display: none), и вместо них включается изображение (скриншот) текста вместе с фоном. Работает на опере, на хроме почему-то нет. Я уже голову сломал, не понимаю. У кого есть какие мысли? <div id="home"> <div class="fullscreen-bg"> <div class="overlay"> <h1>ЗАКОННАЯ ОПТИМИЗАЦИЯ НДС<br></h1> <h2><div class="maintext">комиссия 1%, оплата после подтверждения</div></h2> <h4><div class="maintext">специализируемся на отраслях: строительство, ремонт, стройматериалы</div><br></h4> </div> <video loop muted autoplay poster="video/plane.jpg" class="fullscreen-bg__video"> <source src="video/plane.mp4" type="video/mp4"> <source src="video/plane.webm" type="video/webm"> </video> </div> </div> /* Главная страница */ .fullscreen-bg { overflow: hidden; z-index: -100; position: relative; height: 100%; width: 100%; padding-top:45%; } .fullscreen-bg__video { position: absolute; top: 0; left: 0; width: 100%; } .overlay { background: rgba(0,0,0,0.6); position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 4; } .overlay h1 { text-align:center; color:#fff; margin-top:17%; } .maintext { text-align:center; color:#fff; } @media (max-width: 800px) { .fullscreen-bg { background-image: url(../images/plane.JPG); background-position: center center; background-size: cover; } .fullscreen-bg__video { display: none; } .overlay { display: none;} }