How to make horizontal scrollable div in a mobile view

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

Comments

  • 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;
       }
    }
    
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!