Подскажите, как можно оптимизировать слайдер для мобильной версии этого шаблона. Вот так он выглядит на главной — https://detiknigi.ru/ — основной версии. Хотя бы хочется в мобильной версии уменьшить огромные буквы. Сейчас они по центру слайдера. Желательно уменьшить шрифт и сделать выравнивание по правому краю, например. Подскажите, как это сделать.
0
Сообщений в теме: 5
#1
Отправлено 18 Июль 2019 - 19:02
#2
Отправлено 18 Июль 2019 - 19:51
Добрый день. Для внесения изменений зайдите в Редактор шаблонов--->main.css и в самый конец кода вставьте:
@media all and (max-width: 641px) { #slideshow .content .title {font-size: 26px;padding: 5px 5px;} #slideshow .content {width: 210px;right: 10%;left: unset;margin-left: auto;padding: 0;text-align: center;} }
#3
Отправлено 26 Июль 2019 - 18:03
metry (18 Июль 2019 - 19:51) писал:
Добрый день. Для внесения изменений зайдите в Редактор шаблонов--->main.css и в самый конец кода вставьте:
@media all and (max-width: 641px) { #slideshow .content .title {font-size: 26px;padding: 5px 5px;} #slideshow .content {width: 210px;right: 10%;left: unset;margin-left: auto;padding: 0;text-align: center;} }
Добрый день!
Подскажите ещё, пожалуйста, как можно изменить ширину слайдера в мобильной версии? Подогнать по ширине к экрану. Потому что картинки в слайдер сейчас загружены одинаковые — и для основной, и для мобильной версии сайта, но в мобильной показывается некрасиво обрезанный кусок.
Прикладываю скрин главная страница со слайдером и скрин мобильной версии
#4
Отправлено 29 Июль 2019 - 10:20
ОльгаВикторовна (26 Июль 2019 - 18:03) писал:
Добрый день!
Подскажите ещё, пожалуйста, как можно изменить ширину слайдера в мобильной версии? Подогнать по ширине к экрану. Потому что картинки в слайдер сейчас загружены одинаковые — и для основной, и для мобильной версии сайта, но в мобильной показывается некрасиво обрезанный кусок.
Прикладываю скрин главная страница со слайдером и скрин мобильной версии
Подскажите ещё, пожалуйста, как можно изменить ширину слайдера в мобильной версии? Подогнать по ширине к экрану. Потому что картинки в слайдер сейчас загружены одинаковые — и для основной, и для мобильной версии сайта, но в мобильной показывается некрасиво обрезанный кусок.
Прикладываю скрин главная страница со слайдером и скрин мобильной версии
Здравствуйте. Зайдите в Редактор шаблонов --- main.css и найдите данный код(Строки с 1614):
#slideshow {min-height: 200px;} #slideshow .content .subtitle, #slideshow .content .button {display: none;} #slideshow .content {width: 210px;right: auto;left: 50%;margin-left: -100px;padding: 0;text-align: center;} #slideshow .content .title {margin-bottom: 0;padding: 5px 0;line-height: 1.1;} #slideshow .item .image {height: 200px;}
Замените его на:
#slideshow {min-height: 105px;} #slideshow .content .subtitle, #slideshow .content .button {display: none;} #slideshow .content {width: 210px;right: auto;left: 50%;margin-left: -100px;padding: 0;text-align: center;} #slideshow .content .title {margin-bottom: 0;padding: 5px 0;line-height: 1.1;} #slideshow .item .image {height: 100px;} #slideshow .content {top: 10px;}
#5
Отправлено 09 Сентябрь 2019 - 11:59
stasia (29 Июль 2019 - 10:20) писал:
Здравствуйте. Зайдите в Редактор шаблонов --- main.css и найдите данный код(Строки с 1614):
#slideshow {min-height: 200px;} #slideshow .content .subtitle, #slideshow .content .button {display: none;} #slideshow .content {width: 210px;right: auto;left: 50%;margin-left: -100px;padding: 0;text-align: center;} #slideshow .content .title {margin-bottom: 0;padding: 5px 0;line-height: 1.1;} #slideshow .item .image {height: 200px;}
Замените его на:
#slideshow {min-height: 105px;} #slideshow .content .subtitle, #slideshow .content .button {display: none;} #slideshow .content {width: 210px;right: auto;left: 50%;margin-left: -100px;padding: 0;text-align: center;} #slideshow .content .title {margin-bottom: 0;padding: 5px 0;line-height: 1.1;} #slideshow .item .image {height: 100px;} #slideshow .content {top: 10px;}
Спасибо большое! Только один момент, в мобильной версии не весь текст отображается. В обычной версии три блока — текст с гиперссылкой, подзаг и кнопка "Подробнее" с гиперссылкой. В мобильной видны только верхний текст с гиперссылкой. А можно ещё в код подзаг вписать?
#6
Отправлено 09 Сентябрь 2019 - 17:28
ОльгаВикторовна (09 Сентябрь 2019 - 11:59) писал:
Спасибо большое! Только один момент, в мобильной версии не весь текст отображается. В обычной версии три блока — текст с гиперссылкой, подзаг и кнопка "Подробнее" с гиперссылкой. В мобильной видны только верхний текст с гиперссылкой. А можно ещё в код подзаг вписать?
Здравствуйте. Зайдите в Редактор шаблонов --- main.css и найдите данный код:
#slideshow .content .subtitle, #slideshow .content .button {display: none;}
Замените его на:
#slideshow .content .button {display: none;} #slideshow .content .subtitle {font-size: 14px;}
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных