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

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

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


Донат для форума - использовать для поднятия настроения себе и модераторам

А ещё здесь можно купить рекламу за 15 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru

Ответ
 
Опции темы
Старый 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,785
Репутация: 2322
По умолчанию

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

п.с. Некоторые мобильные браузеры будут грузить контент тега <video> не зависимо от того, виден он или нет.
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Старый 17.10.2018, 13:56   #4
SQLPowerUser
Форумчанин
 
Аватар для SQLPowerUser
 
Регистрация: 19.01.2015
Сообщений: 155
Репутация: 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
Заблокирован
 
Регистрация: 21.11.2008
Адрес: IP адрес: 198.7.62.204 | Адрес:United States United States, Manassas | Провайдер: LeaseWeb | ищите..
Сообщений: 4,991
Репутация: 1588

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

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

Код:

@media (max-width: 800px)

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

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

Последний раз редактировалось 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


18:00.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.

Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru