0 Пользователей и 1 Гость просматривают эту тему.
  • 8 Ответов
  • 878 Просмотров
*

UFO_hA

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

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

Taatshi

  • Support Team
  • 4803
  • 453
  • Верстаем и немножко кодим. Обращайтесь ;)
В @media (min-width: 768px) тоже вписать бэкграунд.
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3  /  ОТЗЫВЫ 
Минимальная ставка за платные услуги 1000 рэ Связь: telegram - Taatshi, почта - Taatshi на яндексе.
*

UFO_hA

  • Захожу иногда
  • 11
  • 0
А можно немного поподробнее. Что именно и в какой файл вписать.
*

Taatshi

  • Support Team
  • 4803
  • 453
  • Верстаем и немножко кодим. Обращайтесь ;)
Дайте ссылку на сайт
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3  /  ОТЗЫВЫ 
Минимальная ставка за платные услуги 1000 рэ Связь: telegram - Taatshi, почта - Taatshi на яндексе.
*

UFO_hA

  • Захожу иногда
  • 11
  • 0
*

Taatshi

  • Support Team
  • 4803
  • 453
  • Верстаем и немножко кодим. Обращайтесь ;)
Эммм... и какой это имадж у Вас пропадает? Вроде все на месте.

А, вижу

Вот это

Код: css
.qf2form {
    background: #000 url(http://avtoprava.od.ua/images/Doroga-v-dal5.jpg)!important;
}
впишите в самое начало CSS, без media
« Последнее редактирование: 26.08.2016, 00:08:39 от Taatshi »
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3  /  ОТЗЫВЫ 
Минимальная ставка за платные услуги 1000 рэ Связь: telegram - Taatshi, почта - Taatshi на яндексе.
*

UFO_hA

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

UFO_hA

  • Захожу иногда
  • 11
  • 0
Таки да, !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

  • Захожу иногда
  • 11
  • 0
Хотя нет. Только что заметил, в конце не хватает фигурной скобки.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Код PHP для заполнения тега meta property og:image

Автор Mnojitell

Ответов: 14
Просмотров: 217
Последний ответ 09.09.2017, 13:43:02
от Mnojitell
Helix 3 : Проблема со ссылками - пропадает слеш и не открывается страница

Автор lesovik

Ответов: 0
Просмотров: 118
Последний ответ 02.07.2017, 21:01:29
от lesovik
Как отключить отображение частицы в Gantry 5 на мобильных устройствах?

Автор AndreyKam

Ответов: 1
Просмотров: 268
Последний ответ 14.03.2017, 04:10:12
от saps70
Страница не оптимизирована для мобильных устройств

Автор hammerteni

Ответов: 5
Просмотров: 369
Последний ответ 06.02.2017, 12:49:05
от dmitry_stas
Не могу оптимизировать сайт для мобильных устройств

Автор p4o1

Ответов: 4
Просмотров: 300
Последний ответ 30.11.2016, 12:09:59
от darkghost