Форум русской поддержки Joomla!® CMS
04.12.2016, 20:16:26 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Пропадает background-image на мобильных устройствах.

 (Прочитано 511 раз)
0 Пользователей и 1 Гость смотрят эту тему.
UFO_hA
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 11


« : 25.08.2016, 23:50:14 »

Здравствуйте уважаемые форумчане. По неопытности прошу у вас помощи. Столкнулся с проблемой!

Решил разукрасить некоторые странички своего сайта (Joomla3.6.2 шаблон protostar). Ддя DIVа в котором находится форма обратной связи задал через CSS background-image:url(картинка); И всё бы ничего, душа радуется но при просмотре со смартфона background пропадает. На мой взгляд во всём виноват @media (min-width: 768px). Так как при изменении размеров дисплея @media перекрывает CSS правило. Как с этим бороться? То есть каким способом вернуть background-image для просмотра на маленьких устройствах.
Записан
Taatshi
Support Team
*****

Репутация: +430/-3
Offline Offline

Пол: Женский
Сообщений: 4716

Мама, я снова верстал во сне...


« Ответ #1 : 26.08.2016, 00:10:42 »

В @media (min-width: 768px) тоже вписать бэкграунд.
Записан
UFO_hA
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 11


« Ответ #2 : 26.08.2016, 00:28:20 »

А можно немного поподробнее. Что именно и в какой файл вписать.
Записан
Taatshi
Support Team
*****

Репутация: +430/-3
Offline Offline

Пол: Женский
Сообщений: 4716

Мама, я снова верстал во сне...


« Ответ #3 : 26.08.2016, 00:54:51 »

Дайте ссылку на сайт
Записан
UFO_hA
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 11


« Ответ #4 : 26.08.2016, 00:56:29 »

http://avtoprava.od.ua/
Записан
Taatshi
Support Team
*****

Репутация: +430/-3
Offline Offline

Пол: Женский
Сообщений: 4716

Мама, я снова верстал во сне...


« Ответ #5 : 26.08.2016, 00:59:04 »

Эммм... и какой это имадж у Вас пропадает? Вроде все на месте.

А, вижу

Вот это

Код
.qf2form {
   background: #000 url(http://avtoprava.od.ua/images/Doroga-v-dal5.jpg)!important;
}
впишите в самое начало CSS, без media
« Последнее редактирование: 26.08.2016, 01:08:39 от Taatshi » Записан
UFO_hA
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 11


« Ответ #6 : 26.08.2016, 01:13:16 »

background-image пропадает на форме онлайн заявке. Смотрю как с телефона так и при помощи инструментов разработчика в браузере.   При разрешении 768х1024 всё нормально. Если выставить разрешение ниже 768 то фон пропадает.
Записан
UFO_hA
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 11


« Ответ #7 : 26.08.2016, 01:57:43 »

Таки да, !important помог. только я не понял одну вещь. Я уже пробовал !important но эффекта никакого не было.
Код:
.qf2form{
    background: #000 url(http://avtoprava.od.ua/images/Doroga-v-dal5.jpg)!important;
    /*background-position: 50% 0%;*/
    background-repeat:no-repeat;
    background-size:  cover;
    background-attachment: local;
    border: 3px solid;
    border-radius: 5px;
    border-color:#005ca1;
  } [code]
Этот код был у меня в конце моего CSS файла. И background-image всё равно пропадал.
Дописав в самом верху код:
Код:
.qf2form {
    background: #000 url(http://avtoprava.od.ua/images/Doroga-v-dal5.jpg)!important;
}
background начал работать и на смартфоне. И тут как говорится меня осенило. Скорчив рожу а-ля "Доктор Хаус", я вспомнил что недавно в этот же файл вписал новую приблуду из последнего бутстрапа-"justified". Это позволяет растянуть горизонтальное меню на всю ширину странички.
Код:
.nav-justified {
  width: 100%;
 
}
.nav-justified > li {
  float: none;
}
.nav-justified > li > a {
  text-align: center;
  margin-bottom: 5px;
}
.nav-justified > .dropdown .dropdown-menu {
  top: auto;
  left: auto;
}
@media (min-width: 768px) {
  .nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-justified > li > a {
    margin-bottom: 0;
  }
}
.nav-tabs-justified {
  border-bottom: 0;
}
.nav-tabs-justified > li > a {
  margin-right: 0;
  border-radius: 4px;
}
.nav-tabs-justified > .active > a,
.nav-tabs-justified > .active > a:hover,
.nav-tabs-justified > .active > a:focus {
  border: 1px solid #dddddd;
}
@media (min-width: 768px) {
  .nav-tabs-justified > li > a {
    border-bottom: 1px solid #dddddd;
    border-radius: 4px 4px 0 0;
  }
  .nav-tabs-justified > .active > a,
  .nav-tabs-justified > .active > a:hover,
  .nav-tabs-justified > .active > a:focus {
    border-bottom-color: #ffffff;
  }
Вырезав всё это и вставив в конце стандартного CSS файла шаблона протостар всё начало работать корректно.

Taatshi-Огромное спасибо за помощь! А я пойду поизучаю LESS///[/code]
Записан
UFO_hA
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 11


« Ответ #8 : 26.08.2016, 02:01:59 »

Хотя нет. Только что заметил, в конце не хватает фигурной скобки.
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet