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

bonusfree

  • Осваиваюсь на форуме
  • 21
  • 1 / 0
Привет ребята, помогите. Тема возможно заезженая но чето быстро не нашел решения.
Цель: Хочу, чтобы заглавное изображение было смотрибельно как на ПК так и на вертикальной мобиле.
сайт wincity.kiev.ua

Движок Joomsheper Xeon. Заглавное изображение это их слайдер Xeon slider - я отключил навигацию, там одна картинка и подпись.
Выводится модулем. Настроек там нет кроме текстовки. Все лежит в CSS. Код вот:
Код
sp-slider-wrapper{background-image:url('/templates/shaper_xeon/images/slider-bg.jpg');background-attachment:fixed;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;padding:360px
я расширил его на весь экран padding:360px там стояло до этого 175px

Все круто как по мне на ПК, но в мобиле выводит угол дома, что вообще не привлекательно.
И тут меня ступпорнуло, не пойму как реализовать это, чтоб более менее было и там и там.
*

effrit

  • Легенда
  • 10132
  • 1118 / 13
  • effrit.com
здра.
под нужные разрешения допишите media условия
для
Код
#sp-slider-wrapper {
background-size: 120%;
}
число процентов ставите, как вам больше нра. 100% будет ровно в экран
*

bonusfree

  • Осваиваюсь на форуме
  • 21
  • 1 / 0
таак проверил, ближе уже.
Спасибо!

правда текст уходит вниз теперь
а как же для текста прописать, чтоб он фиксировался на центре картинки?
*

bonusfree

  • Осваиваюсь на форуме
  • 21
  • 1 / 0
ага, при таком раскладе у меня на телефоне картинка 100% и надпись под картинкой.
Код
sp-slider-wrapper{background-image:url('/templates/shaper_xeon/images/slider-bg.jpg');background-attachment:relative;background-size:100%;background-position:50% 50%;background-repeat:no-repeat;padding:330px

если прописать background-position:top top или 50% top - то либо по центру картинка, либо в топе, что тоже не смотрибельно
даже не знаю че тут вписать
*

effrit

  • Легенда
  • 10132
  • 1118 / 13
  • effrit.com
ну инструмент у вас есть, что с ним делать - это уже к вашему дизайнескому скилу вопрос  ;D
можно, например, для 360 по ширине выставить
Код
background-size: 210%;
background-position: 84% 103%;
и сдвинуть текст вверх, тогда будет похоже на композицию, а не единичный дом.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Можно ли на gridbox установить swiper slider

Автор tsimba

Ответов: 0
Просмотров: 481
Последний ответ 13.10.2021, 12:17:59
от tsimba
SP Page Builder video slider

Автор wishlight

Ответов: 0
Просмотров: 512
Последний ответ 16.09.2021, 21:38:11
от wishlight
Smart Slider 3: настройка под мобильные устройства

Автор coliandra

Ответов: 4
Просмотров: 1396
Последний ответ 31.01.2021, 11:10:14
от coliandra
Модуль Layer Slider (John Gera, George Krupa, Janos Biro, Balint Polgarfi)

Автор wayn

Ответов: 1
Просмотров: 1044
Последний ответ 15.12.2019, 13:10:49
от beliyadm
fotorama. dots на мобильном

Автор safronoff343

Ответов: 0
Просмотров: 539
Последний ответ 07.08.2019, 21:06:33
от safronoff343