Как сделать системный спойлер 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;
}}

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

Примечание

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

• Сам пользуюсь этим спойлером, который адаптировал под себя и полностью видоизменил, может в ближайшем времени поделюсь в материалах нашего блога, сайт источник спойлера. Спойлер создан без использования Java Script, лишь CSS.
• Простой HTML5 спойлер, пример использования описан в инструкции: http://htmlbook.ru/html/details
• Так же можно использовать вариант на java script: https://www.ucoz.ru/help/design/plavnoe-razvorachivanie-sozdanie-ajax-okon