"Show more" button for a gallery on mobile, but a scrollable div everywhere else

HTML-CSS
1

Guys, I’m stuck, could anyone help me out, please?

I’m building a books gallery, which should be responsive. That part I have covered.
But I also want it to be scroll able only on wide devices, and on mobile/small display devices, I want to show only one picture, and have a button “show all books”.

I tried different solutions, but I can’t seem to have both things, if I manage to display the button, than it either stays on the same place on desktop, AND ruins the gallery by misplacing everything, or worse - it disappears on desktop and takes all content with it.

How can I create a “Show All” button after the first image in the gallery on mobile - 600px<, and have a scrollable fixed-width block (div) everywhere else?



<div class="container" id="books">

<div class="container">
  <div class="grid">
    
    <div class="cell">
      <img src="http://lorempixel.com/200/300" class="book">
    </div>
    <div class="cell">
      <img src="http://lorempixel.com/200/300" class="book">
     </div>        
    <div class="cell">
      <img src="http://lorempixel.com/200/300" class="book">
    </div>
    <div class="cell">
      <img src="http://lorempixel.com/200/300" class="book">
    </div>
     <div class="cell">
      <img src="http://lorempixel.com/200/300" class="book">
    </div>
     <div class="cell">
      <img src="http://lorempixel.com/200/300" class="book">
    </div>
     <div class="cell">
      <img src="http://lorempixel.com/200/300" class="book">
    </div>
     <div class="cell">
      <img src="http://lorempixel.com/200/300" class="book">
    </div>
     <div class="cell">
      <img src="http://lorempixel.com/200/300" class="book">
    </div>
  </div>
</div>  
  </div>

CSS


.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 1rem;
}
.book {
  max-width: 100%;
}
.cell img {
  display: block;
}

@media screen and (min-width: 600px) {
  .container{
    overflow: auto;
    height: (70vh);
  }
  .grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }
  .cell {
    width: calc(50% - 2rem);
  }
}

@media screen and (min-width: 1000px) {
  .container{
    overflow: auto;
    max-height: 80vh;
  }
  .cell {
    width: calc(33.3333% - 2rem);
  }
}

.cell {
  margin: 1rem;
}
2

You mean like this: https://codepen.io/jenovs/pen/qvRpQX

3

Than you!

My original goal was to build it using CSS only, but I asked also on Stackoverflow, as well as few webchats, and apparently, it really needs some JS.
I have not learned JS yet.

4

No JS version: https://codepen.io/jenovs/pen/BbWaPZ

5

I really need to learn how these things work…