Home Forums HTML How to make horizontal scrollable div in a mobile view

Viewing 1 reply thread
  • Author
    Posts
    • #106
      avi
      Participant

      I want to make the content of a div horizonatally scrollable in mobile view.
      I want to make like this :
      gif

    • #107
      avi
      Participant

      Just try to apply flex none to the div to keep their size and a specify media query where you want desktop to start.

      .images {
          display: flex;
          align-items:center;
          background-color: #eee;
          padding: 1rem;
          overflow-x: scroll;
      }
      
      .images > div {
          flex: none;
          max-width: 100%;
          padding-left: 15px;
          padding-right: 15px;
      }
      
      .images img {
          max-width:100%;
          width: 100%;
      }
      
      @media (min-width: 960px) {
      
        .images {
           overflow-x: visible;
        }
      
        .images > div {
          flex-basis: 0;
          flex-grow: 1;
         }
      }
Viewing 1 reply thread
  • You must be logged in to reply to this topic.
Scroll to Top