0

Как сделать чтобы элементы в мобильной версии скролились по горизонтали?

* {
  box-sizing: border-box;
}

.items-wrapper {
  width: 800px;
  display: flex;
  justify-content: space-between;
}

.item {
  width: 100%;
  text-align: center;
}

.item__circle {
  margin: 0 auto 22px;
  width: 80px;
  height: 80px;
  padding: 22px;
  background: #E6F3FB;
  border-radius: 50%;
}

.item__icon {
  width: 36px;
  height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='shield-virus' class='svg-inline--fa fa-shield-virus fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M224,192a16,16,0,1,0,16,16A16,16,0,0,0,224,192ZM466.5,83.68l-192-80A57.4,57.4,0,0,0,256.05,0a57.4,57.4,0,0,0-18.46,3.67l-192,80A47.93,47.93,0,0,0,16,128C16,326.5,130.5,463.72,237.5,508.32a48.09,48.09,0,0,0,36.91,0C360.09,472.61,496,349.3,496,128A48,48,0,0,0,466.5,83.68ZM384,256H371.88c-28.51,0-42.79,34.47-22.63,54.63l8.58,8.57a16,16,0,1,1-22.63,22.63l-8.57-8.58C306.47,313.09,272,327.37,272,355.88V368a16,16,0,0,1-32,0V355.88c0-28.51-34.47-42.79-54.63-22.63l-8.57,8.58a16,16,0,0,1-22.63-22.63l8.58-8.57c20.16-20.16,5.88-54.63-22.63-54.63H128a16,16,0,0,1,0-32h12.12c28.51,0,42.79-34.47,22.63-54.63l-8.58-8.57a16,16,0,0,1,22.63-22.63l8.57,8.58c20.16,20.16,54.63,5.88,54.63-22.63V112a16,16,0,0,1,32,0v12.12c0,28.51,34.47,42.79,54.63,22.63l8.57-8.58a16,16,0,0,1,22.63,22.63l-8.58,8.57C329.09,189.53,343.37,224,371.88,224H384a16,16,0,0,1,0,32Zm-96,0a16,16,0,1,0,16,16A16,16,0,0,0,288,256Z'%3E%3C/path%3E%3C/svg%3E");
}
<div class="items-wrapper">
  <div class="item">
    <div class="item__circle">
      <div class="item__icon"></div>
    </div>
    <span class="item__text">
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit
                    </span>
  </div>
  <div class="item">
    <div class="item__circle">
      <div class="item__icon"></div>
    </div>
    <span class="item__text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                    </span>
  </div>
  <div class="item">
    <div class="item__circle">
      <div class="item__icon"></div>
    </div>
    <span class="item__text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                    </span>
  </div>
  <div class="item">
    <div class="item__circle">
      <div class="item__icon"></div>
    </div>
    <span class="item__text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                    </span>
  </div>
  <div class="item">
    <div class="item__circle">
      <div class="item__icon"></div>
    </div>
    <span class="item__text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                    </span>
  </div>
</div>

1 ответ 1

2

Как то так:

* {
  box-sizing: border-box;
}
.wrapper{
  max-width: 100%;
   overflow: scroll;
}
.items-wrapper {
  width: 800px;
  display: flex;
  justify-content: space-between;
}

.item {
  width: 100%;
  text-align: center;
}

.item__circle {
  margin: 0 auto 22px;
  width: 80px;
  height: 80px;
  padding: 22px;
  background: #E6F3FB;
  border-radius: 50%;
}

.item__icon {
  width: 36px;
  height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='shield-virus' class='svg-inline--fa fa-shield-virus fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M224,192a16,16,0,1,0,16,16A16,16,0,0,0,224,192ZM466.5,83.68l-192-80A57.4,57.4,0,0,0,256.05,0a57.4,57.4,0,0,0-18.46,3.67l-192,80A47.93,47.93,0,0,0,16,128C16,326.5,130.5,463.72,237.5,508.32a48.09,48.09,0,0,0,36.91,0C360.09,472.61,496,349.3,496,128A48,48,0,0,0,466.5,83.68ZM384,256H371.88c-28.51,0-42.79,34.47-22.63,54.63l8.58,8.57a16,16,0,1,1-22.63,22.63l-8.57-8.58C306.47,313.09,272,327.37,272,355.88V368a16,16,0,0,1-32,0V355.88c0-28.51-34.47-42.79-54.63-22.63l-8.57,8.58a16,16,0,0,1-22.63-22.63l8.58-8.57c20.16-20.16,5.88-54.63-22.63-54.63H128a16,16,0,0,1,0-32h12.12c28.51,0,42.79-34.47,22.63-54.63l-8.58-8.57a16,16,0,0,1,22.63-22.63l8.57,8.58c20.16,20.16,54.63,5.88,54.63-22.63V112a16,16,0,0,1,32,0v12.12c0,28.51,34.47,42.79,54.63,22.63l8.57-8.58a16,16,0,0,1,22.63,22.63l-8.58,8.57C329.09,189.53,343.37,224,371.88,224H384a16,16,0,0,1,0,32Zm-96,0a16,16,0,1,0,16,16A16,16,0,0,0,288,256Z'%3E%3C/path%3E%3C/svg%3E");
}
<div class="wrapper">
<div class="items-wrapper">
  <div class="item">
    <div class="item__circle">
      <div class="item__icon"></div>
    </div>
    <span class="item__text">
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit
                    </span>
  </div>
  <div class="item">
    <div class="item__circle">
      <div class="item__icon"></div>
    </div>
    <span class="item__text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                    </span>
  </div>
  <div class="item">
    <div class="item__circle">
      <div class="item__icon"></div>
    </div>
    <span class="item__text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                    </span>
  </div>
  <div class="item">
    <div class="item__circle">
      <div class="item__icon"></div>
    </div>
    <span class="item__text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                    </span>
  </div>
  <div class="item">
    <div class="item__circle">
      <div class="item__icon"></div>
    </div>
    <span class="item__text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                    </span>
  </div>
  </div></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.