Новости Joomla

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

UFO_hA

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

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

Taatshi

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

UFO_hA

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

Taatshi

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

UFO_hA

  • Осваиваюсь на форуме
  • 11
  • 0 / 0
*

Taatshi

  • Глобальный модератор
  • 5259
  • 481 / 2
  • Верстаем и кодим. Обращайтесь ;)
Эммм... и какой это имадж у Вас пропадает? Вроде все на месте.

А, вижу

Вот это

Код: 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, ОБНОВЛЕНИЕ  |  ОТЗЫВЫ 
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi
*

UFO_hA

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

UFO_hA

  • Осваиваюсь на форуме
  • 11
  • 0 / 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 / 0
Хотя нет. Только что заметил, в конце не хватает фигурной скобки.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

[РЕШЕНО]Скрыть пункт меню на мобильных устройствах

Автор lexxbry

Ответов: 16
Просмотров: 4625
Последний ответ 23.05.2023, 07:22:49
от geral
Страница не оптимизирована для мобильных устройств

Автор hammerteni

Ответов: 17
Просмотров: 2600
Последний ответ 23.11.2020, 23:47:10
от Alex_gs
Меню в Protostar для мобильных версий

Автор gamletjlo

Ответов: 3
Просмотров: 938
Последний ответ 17.02.2019, 13:23:01
от sivers
Два мобильных меню на сайте

Автор Vasiliy111

Ответов: 3
Просмотров: 721
Последний ответ 22.10.2018, 15:11:57
от Vasiliy111
Настройка количесва изображений в simple image galery

Автор leha111

Ответов: 2
Просмотров: 710
Последний ответ 12.06.2018, 14:45:31
от leha111