Перейти к содержимому


Слайдер В Шаблоне Дружок

дружок слайдер

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 5

#1 ОльгаВикторовна

ОльгаВикторовна

    Пользователь

  • Пользователи
  • PipPip
  • 32 сообщений

Отправлено 18 Июль 2019 - 19:02

Подскажите, как можно оптимизировать слайдер для мобильной версии этого шаблона. Вот так он выглядит на главной — https://detiknigi.ru/ — основной версии. Хотя бы хочется в мобильной версии уменьшить огромные буквы. Сейчас они по центру слайдера. Желательно уменьшить шрифт и сделать выравнивание по правому краю, например. Подскажите, как это сделать.

#2 metry

metry

    Активный участник

  • Модераторы
  • 871 сообщений

Отправлено 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 ОльгаВикторовна

ОльгаВикторовна

    Пользователь

  • Пользователи
  • PipPip
  • 32 сообщений

Отправлено 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;}
}

Добрый день!

Подскажите ещё, пожалуйста, как можно изменить ширину слайдера в мобильной версии? Подогнать по ширине к экрану. Потому что картинки в слайдер сейчас загружены одинаковые — и для основной, и для мобильной версии сайта, но в мобильной показывается некрасиво обрезанный кусок.
Прикладываю скрин главная страница со слайдером и скрин мобильной версии

Прикрепленные изображения

  • IMG_4759.PNG
  • IMG_4760.PNG
  • Снимок-экрана-2019-07-26-в-17.58.52.jpg


#4 stasia

stasia

    Активный участник

  • Модераторы
  • 561 сообщений

Отправлено 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 ОльгаВикторовна

ОльгаВикторовна

    Пользователь

  • Пользователи
  • PipPip
  • 32 сообщений

Отправлено 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 stasia

stasia

    Активный участник

  • Модераторы
  • 561 сообщений

Отправлено 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 анонимных