Горизонтальный скроллинг на телефоне - прокрутка панелей вправо на мобильном экране

Card content 1
Card Content 2
Card Content 3

Данная разметка позволит вывести некоторые элементы на странице на ПК (как колонки или просто друг под другом блоки), а на мобильном они будут выводиться со скроллингом вправо.

Атрибут data-slideout-ignore используется для того, чтобы скроллинг не приводил к открытию основного меню. 

Как реализовать: 

<style type="text/css">
  @media only screen and (max-width : 576px)
  {
    .as-mob-card-container > .row {
      overflow-x: auto;
    }
  }
  .as-mob-card-item {
    background-color: #ffffff;
    border-radius: 6px;
    margin-bottom: 16px;
    min-height: 100px;
    -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
    -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
    box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
  }

</style>
<div class="as-mob-card-container " data-slideout-ignore="">
  <div class="row text-center flex-nowrap flex-sm-wrap">
    <div class="col-12 col-md-4 as-mob-card-item mx-sm-auto bg-danger">
      Card content 1
    </div>
    <div class="col-12 col-md-4 as-mob-card-item mx-sm-auto bg-primary">
      Card Content 2
    </div>
    <div class="col-12 col-md-4 as-mob-card-item mx-sm-auto bg-info">
      Card Content 3
    </div>    
  </div>
</div>

Другие модули

Последние обновления

SQL-инструмент для создания личных кабинетов на сайте

Суть подхода и история создания Falcon Space

Платформа Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки

Это быстрое внесение изменений

по ходу эксплуатации программы

Это современный интерфейс

полная адаптация под мобильные устройства