媒体查询可以使翻页卡超过一圈

Question

这是我第一次问问题，所以我有点菜鸟。我试图使我的网站适应移动设备。我有这些翻转卡，一旦将鼠标悬停在上面，即可翻转以显示更多信息。但是随着网站规模缩小以适合移动设备，所有的翻页卡都相互叠放在一起。任何帮助/指导将不胜感激:)

HTML

<div class="flip-card"><span>
            <div class="flip-card-inner">
              <div class="flip-card-front">
                <?php if ($row["Status"] == "Live") { 

                  echo "<h3 class='live'>".$row["Status"]."</h3>";

                } else {

                  echo "<h3 class='comingSoon'>".$row["Status"]."</h3>";

                } ?>

                <img src="<?php echo $row['Images']; ?>" alt="<?php echo $row["Name"]; ?>" style="width:100%;"/>
                <div><h2><?php if (strlen($row["Name"]) < 17) { 

                  echo "<p><span class='whiteText'>".$row["Name"]."</span></p>";

                } else {

                  echo "<p><span class='whiteText'>".substr($row["Name"], 0, 17)."...</span></p>";

                } ?> </h2></div>

              </div>
              <div class="flip-card-back">
                <h2 style="font-size: 16px;"><?php echo $row["Name"]; ?></h2>
                <?php if (strlen($row["Description"]) < 250) { 

                  echo "<p style = 'font-size: 14px;'><span class='whiteText'>".$row["Description"]."</span></p>";

                } else {

                  echo "<p style = 'font-size: 14px;'><span class='whiteText'>".substr($row["Description"], 0, 250)."...</span></p>";

                } ?> 
                <div class="buttonCenter">

                  <a href="film-times.php?id=<?php echo $row["Movie_ID"]; ?>"><button class="button"><span>Showing times</span></button>
                  <a href="FilmInfo.php?id=<?php echo $row["Movie_ID"]; ?>"><button class="button"><span>More info</span></button></a>

                </div></span>
              </div>
            </div>
          </div>

CSS

@media only screen and (max-width: 425px) {
  /* For mobile phones: */
  div.boxed {
    width: 100%;
    display: block;
    height: 100%;
  }
  div.loginBox{
    float: none;
    width: 100%;
    display: block;
    height: 100%;
  }
  div.main-container {
    width: 100%;
    display: block;
    height: 100%;
  }
  div.card{
    width: 100%;
    display: block;
    height: 100%;
  }
  div.flip-card {
    width: 100%;
    display: block;
    height: 100%;
  }
  div.flip-card-inner{
    width: 100%;
    display: block;
    height: 100%;
  }
  div.flip-card:hover{
    width: 100%;
    display: block;
    height: 100%;
    } 
    div.flip-card-inner{
      width: 100%;
    display: block;
    height: 100%;
    }
  div.flip-card-front{
    width: 100%;
    display: block;
    height: 100%;
    }
    div.flip-card-back{
      width: 100%;
    display: block;
    height: 100%;
    }
  div.flip-card-front{
    width: 100%;
    display: block;
    height: 100%;
  }
  div.flip-card-back{
    width: 100%;
    display: block;
    height: 100%;
  }
}

图片前

悬停一次：

拍照后