专辑卡没有在行方向弯曲 - ipad 视图

Question

我正在尝试为平板电脑视图设置 2 列，但由于某种原因，相册不会在行方向上弯曲。我正在使用 react an。

有人可以帮我看看这个问题吗？

我留下这些链接以获得完整代码：

https://music-release-site-by-maria-and-daniela.netlify.app/

https://github.com/dannuzak/project-music-releases

Mobile view CSS

* {
  box-sizing: border-box;
  margin: 0;
  text-decoration: none;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #111418;
}

.header {
  margin: 40px;
  padding-bottom: 10px;
  font-size: 0.8rem;
  border-bottom: #353a45 solid 1px;
  color: #fff;
}

.albums-container {
  display: flex;
  flex-direction: column;
  align-content: center;
  margin: 10%;
}

.album-card {
  margin-bottom: 10%;
  height: 360px;
  margin-bottom: 20%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.album-cover {
  /* height: 300px;
  width: 100%; */
  position: relative;
}

.cover {
  width: 100%;
}



@media all and (min-width: 768px) {
  .albums-container {
    display: flex;
    width: 95%;
    margin: 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .album-card {
    width: 40%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;  // I have removed this //
  }
}



---- Header component--

import React from 'react'

const Header = () => {
   
    return (
        <header className="header">
            <h1>New albums & singles</h1>
        </header>
    );
}

--------- Album component




 <>
      <div className="album-card">
        <div className = "album-cover">
          <div className="icon-container"> 
            <img className="icon heart" src="/icons/heart.svg" alt="heart icon"/>
            <img className="icon play" src="/icons/play.svg" alt="play button icon"/> 
            <img className="icon dots" src="/icons/dots.svg" alt="dots icon"/> 
          </div>  
          <a href={props.urlAlbum} target= "_blank" rel="noopener noreferrer">
            <img className="cover" src={props.image} alt="Album cover"/>
          </a>
          
        </div>
        <div>
        <a href={props.urlAlbum} target= "_blank" rel="noopener noreferrer">  
          <h2 className="album-name">{props.name}</h2>
        </a>  
        </div>
        <div className="album-artist">
          <a href={props.urlArtist} target= "_blank" rel="noopener noreferrer"> 
           <h2>{props.artists}</h2>
          </a> 
        </div>   
      </div> 
    </>


export default Header;