Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 16.10.2018, 09:13   #1
set34
Новичок
Джуниор
 
Регистрация: 16.10.2018
Сообщений: 2
По умолчанию display: none не работает на хостинге

Здравствуйте!
http://nds.nika-llc.pw/
Проблема следующая. Друг попросил адаптировать под мобильные устройства сайт. Все работает, НО:
На главной странице есть заголовок, который масштабируется. И на маленьком экране просто исчезает.
Я решил сделать просто: сделать скриншот экрана и добавить его вместо текста, который не получается масштабировать.
Логика такая: на большом экране текст работает, видео фоном тоже.
На маленьком экране видео и текст отключаются (display: none), и вместо них включается изображение (скриншот) текста вместе с фоном. Работает на опере, на хроме почему-то нет.

Я уже голову сломал, не понимаю.
У кого есть какие мысли?
set34 вне форума Ответить с цитированием
Старый 16.10.2018, 09:15   #2
set34
Новичок
Джуниор
 
Регистрация: 16.10.2018
Сообщений: 2
По умолчанию

код CSS

Код:
/* Главная страница */
.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;}

		
}
Пожалуйста, оформляйте Ваш код согласно правилам.

код HTML

Код:
<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>

Последний раз редактировалось Вадим Мошев; 16.10.2018 в 13:41.
set34 вне форума Ответить с цитированием
Старый 17.10.2018, 05:04   #3
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

ну хз... По мне так одинаково деремово работает как в опере, так и в ФФ и в хроме.

п.с. Некоторые мобильные браузеры будут грузить контент тега <video> не зависимо от того, виден он или нет.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 17.10.2018, 12:56   #4
SQLPowerUser
Форумчанин
 
Аватар для SQLPowerUser
 
Регистрация: 19.01.2015
Сообщений: 158
Радость

Тут смотрю, position: absolute;
Поставьте вместо display: none;
left: -9999px;
Но видео будет грузиться...
SQLPowerUser вне форума Ответить с цитированием
Старый 03.11.2018, 07:03   #5
victorshkoda
Пользователь
 
Аватар для victorshkoda
 
Регистрация: 04.01.2012
Сообщений: 71
По умолчанию

Попобуйте через js подключать! видео и пр. при нужном разрешении.
victorshkoda вне форума Ответить с цитированием
Старый 05.11.2018, 03:27   #6
vasek123
Заблокирован
 
Регистрация: 21.11.2008
Сообщений: 4,988
По умолчанию

В свое время приходилось сталкиваться с адаптивной версткой(просматривал в основном на google chrome, так как на большинстве смартфонов в основном используется этот браузер), так разочаровал один момент, данная конструкция:

Код:
@media (max-width: 800px)
не всегда действует, так что пришлось мне текст и изображения подстраивать под все экраны, чтобы вышло все как надо. Спасло лишь то что удалось задать минимальную ширину текста и изображения так как на тот момент мне не требовалось убирать текст при изменении экрана.

что касается смены текста на картинку, то, тут, по моему, без JavaScript не обойтись.

Последний раз редактировалось vasek123; 05.11.2018 в 03:46.
vasek123 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает style.display="inline" zeva JavaScript, Ajax 1 13.06.2012 16:34
imagecreatefrompng на денвере работает, на хостинге нет crystalbit PHP 2 24.12.2011 00:07
Не работает скрипт на хостинге stepennwolf PHP 5 28.11.2010 14:48
на локалхосте работает, на хостинге нет! mrgrudge PHP 7 25.10.2010 12:16
MediaPlayer Display StartMis Мультимедиа в Delphi 7 31.01.2009 21:28