CODEWITHSUNDEEP
javascripthtmljqueryjquery-mobile
Max Njoroge
Max Njoroge

Reputation: 487

touch slide a <ul> list @media

when the screen gets minimized some of the words go off screen, i need a way for the mobile user to swipe the <ul><li></li></ul> to see all the words on the list

<ul id="portfolio-flters" class="d-flex justify-content-end" data-aos="fade-up">
  <li data-filter="*" class="filter-active">All</li>
  <li data-filter=".filter-hotel">Hotel</li>
  <li data-filter=".filter-bed">Lodging</li>
  <li data-filter=".filter-foo">Breakfast</li>
  <li data-filter=".filter-conf">Conferences</li>
</ul>

Upvotes: 0

Views: 60

Answers (1)

M.DeBaecke
M.DeBaecke

Reputation: 83

This should do the trick!

ul {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
  overflow: scroll;
  // This is where the magic happens
  -webkit-overflow-scrolling: touch;
}

Upvotes: 1

Related Questions