Отображение одной страницы флипбука в мобильном представлении

Question

Поэтому я пытаюсь создать флипбук для мобильного просмотра, и проблема в том, что мне бы хотелось, чтобы он отображал только 1 страницу, когда он находится в мобильном представлении с полем 10 пикселей со всех сторон, и когда он находится в мобильном представлении, он также имеет 100% ширина.

Я пытался установить некоторые запросы @media, но, поскольку я новичок во всем дизайне "сначала для мобильных устройств", я мог бы использовать некоторые указатели.

HTML

  <div class="container">
    <div id="flipbook">
    <div class="hard">Headline</div>
    <div class="hard"></div>
    <div>Chapter 1</div>
    <div>Chapter 2</div>
    <div>Chapter 3</div>
    <div>The End</div>
    <div class="hard"></div>
    <div class="hard"></div>
  </div>
</div>

CSS

body {
  overflow: hidden;
}


#flipbook .page{
    background-color:   #FFE4C4;
    line-height:300px;
    font-size:20px;
    text-align:center;

}

#flipbook .page-wrapper{
    -webkit-perspective:2000px;
    -moz-perspective:2000px;
    -ms-perspective:2000px;
    -o-perspective:2000px;
    perspective:2000px;
}

#flipbook .hard{
    background:#ccc !important;
    color:#333;
    -webkit-box-shadow:inset 0 0 5px #666;
    -moz-box-shadow:inset 0 0 5px #666;
    -o-box-shadow:inset 0 0 5px #666;
    -ms-box-shadow:inset 0 0 5px #666;
    box-shadow:inset 0 0 5px #666;
    font-weight:bold;
}