Airbnbの模写、スマホ版、横スクロールを実装したい。

Question

Airbnbの模写コーディングをしているのですが、スマホ版で横スクロールができるようにしたいです。

<ul class="howToEnjoy">
      <li>
        <a href="">
          <img src="img/tablet.jpg">
          <div class="explanation">
            <h2>オンライン体験</h2>
            <p>
              世界各地のホストがご案内。皆で一緒に体験する、ここでしかできない体験。
            </p>
          </div>
        </a>
      </li>

      <li>
        <a href="">
          
            <img src="img/dome.jpg">
            <div class="explanation">
              <h2>ユニークなリスティング</h2>
              <p>寝るだけではもったいないお部屋。</p>
            </div>
        </a>
      </li>

      <li>
        <a href="">
          <img src="img/house.jpg">
          <div class="explanation">
            <h2>まるまる貸切</h2>
            <p>家族や友人と、ゆったり快適に過ごせるプライベート空間。</p>
          </div>
        </a>
      </li>
    </ul>

.howToEnjoy {
  padding-left: 0;
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  list-style: none;
}

するとこうなります。

liの中の文字にwhite-space: nowrap;が効いてしまい文字を折り返さなくなりました。
かといってwhite-space: nowrap;をなくすと
![]

このようになります。
どうすればよいでしょうか。

Answer 1

devtoolで確認したところ、scroll-snapを利用していました。

https://developer.mozilla.org/ja/docs/Web/CSS/scroll-snap-type

Comments

[stylish_shield]

ありがとうございます。
試してみます。