Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

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

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

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

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

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

код 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 в 14:41.
set34 вне форума   Ответить с цитированием
Старый 17.10.2018, 06:04   #3
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,692
Репутация: 2205
По умолчанию

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

п.с. Некоторые мобильные браузеры будут грузить контент тега <video> не зависимо от того, виден он или нет.
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Старый 17.10.2018, 13:56   #4
SQLPowerUser
Форумчанин
 
Аватар для SQLPowerUser
 
Регистрация: 19.01.2015
Сообщений: 145
Репутация: 193
Радость

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

skype: victorshkoda
По умолчанию

Попобуйте через js подключать! видео и пр. при нужном разрешении.
victorshkoda вне форума   Ответить с цитированием
Старый 05.11.2018, 04:27   #6
vasek123
Сисадмин и
Профессионал
 
Аватар для vasek123
 
Регистрация: 21.11.2008
Адрес: IP адрес: 198.7.62.204 | Адрес:United States United States, Manassas | Провайдер: LeaseWeb | ищите..
Сообщений: 4,704
Репутация: 1513

icq: 590966827
skype: vasek12314
По умолчанию

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

Код:

@media (max-width: 800px)

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

что касается смены текста на картинку, то, тут, по моему, без JavaScript не обойтись.
__________________
The system administrator without a domain similar to the warrior without a sword.

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

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает 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 15:48
на локалхосте работает, на хостинге нет! mrgrudge PHP 7 25.10.2010 12:16
MediaPlayer Display StartMis Мультимедиа в Delphi 7 31.01.2009 22:28


07:37.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru