/ Адаптивность / Решения для мобильной версии

Решения для мобильной версии

Собираем различные механизмы изменения стилей для мобильной версии.

Изменение направления таблицы

Если у нас есть таблица, например, с перечислением отделов и в моб. версии она не помещается, то мы можем пересобрать её в колонки.

Закупки+7 (999) 888-77-66buyers@site.ru
Продажи+7 (999) 888-77-66sales@site.ru
Логистика+7 (999) 888-77-66logistics@site.ru
Бухгалтерия+7 (999) 888-77-66buh@site.ru

Назначим таблице класс contacts и пропишем стили для моб. версии.

@media (max-width: 768px) {
    table.contacts tbody {display: flex; flex-direction: column; gap: 20px;}
    table.contacts tr {display: flex; flex-direction: column;}
    table.contacts tr td:first-child {font-weight: 600;}
    table.contacts tr td:not(:last-child) {border-bottom: 0 !important;}
}

Таблица примет следующий вид:

Закупки+7 (999) 888-77-66buyers@site.ru
Продажи+7 (999) 888-77-66sales@site.ru
Логистика+7 (999) 888-77-66logistics@site.ru
Бухгалтерия+7 (999) 888-77-66buh@site.ru
[site-socialshare]
  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Решения для мобильной версии
Плагины Must-Use
Рекомендации для васПлагины Must-UseOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.