• Главная
  • uCoz
  • Как сделать системный спойлер uCoz адаптивным ?
Как сделать системный спойлер uCoz адаптивным ?

Как сделать системный спойлер uCoz адаптивным ?

О чем материал ?

На сайтах в uCoz и uWeb мы часто пользуемся системным спойлером, многие пользователи для спойлера создают длинные названия и это создает проблему в адаптивности так как кнопка спойлера становится длинной и растягивает страницу.

Сегодня мы рассмотрим небольшое решение, которое решит данную проблему, по сути стили CSS будут фиксировать длину кнопки спойлера для мобильных устройств, название кнопки будет так же обрезаться на уровне стилей и вконце добавим три точки, что дает понять, что название сокращенное.

Как настроить адаптивность спойлера ?

Достаточно для решения данной проблемы прописать в стили небольшое media условие:

@media screen and (min-width: 240px) and (max-width: 650px) { 
.uSpoilerButBl input[type="button"] {
    width:240px!important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}}

после сохранения изменений, чтобы увидеть результат, обязательно в браузере чистим кеш.

Примечание

Вы можете искать альтернативы использования спойлеров, могу вам дать рекомендации, что использовать, полезные ссылки будут в списке ниже.

Лицензия: CC BY-SA 4.0

Автор: Юрий Герук

Похожие материалы:
Помогла ли вам статья?
Да Нет
Статья оказалась полезной для 0 человек
avatar