上のカードを表示するには、フレックス使ってモバイル

Question

だから私はこの

 <div class="resource-card-container"> 
     <div class="resource-card"> 
      <h3> Informal Waste Workers Contribution Bangalore </h3> 
      <div class="resource-card-summary"> 
      he paper analyses the demographic profile of these waste-pickers.. 
      </div> 
      <a class="resource-link" href="#"></span> 
      </a> 
     </div> 

     //other cards 

    </div> 

// CSS

のようなこの

HTMLとCSSの外観の何かのように見えるのカードを持っているウェブサイトを持っています

.resource-card-container { 
    display: flex; 
    min-width: 900px; 
    flex-wrap: wrap; 
} 


.resource-card { 
    position: relative; 
    width: 28%; 
    border: 1px solid #e53b51; 
    padding: 10px; 
    margin: 10px; 
    height: 230px; 
} 

これはモバイルデバイスでは機能しません。デスクトップ上しかし

私はカードが十分に広くなるようにする最小幅を必要としています。

モバイルデバイスでの最良の動作は、カードを1つずつ提示することです。

どうすればよいですか？

Answer 1

flex-direction: column;を使用すると、すべてのカードを1つの列にまとめることができます。 @mediaに max-width: 400pxを移動先のモバイルの幅に合わせて変更します。

以下のスニペットが更新されています。

.resource-card-container { 
 
    display: flex; 
 
    min-width: 900px; 
 
    flex-wrap: wrap; 
 
    box-sizing: border-box; 
 
} 
 

 

 
.resource-card { 
 
    position: relative; 
 
    width: 28%; 
 
    border: 1px solid #e53b51; 
 
    padding: 10px; 
 
    margin: 10px; 
 
    height: 230px; 
 
    box-sizing: border-box; 
 
} 
 

 
@media all and (max-width: 400px) { 
 
    .resource-card-container { 
 
    width:100%; 
 
    min-width:100%; 
 
    flex-direction: column; 
 
    } 
 
    .resource-card { 
 
    width:100% 
 
    } 
 
}

<div class="resource-card-container"> 
 
     <div class="resource-card"> 
 
      <h3> Informal Waste Workers Contribution Bangalore </h3> 
 
      <div class="resource-card-summary"> 
 
      he paper analyses the demographic profile of these waste-pickers.. 
 
      </div> 
 
      <a class="resource-link" href="#">asasaas 
 
      </a> 
 
     </div> 
 
      <div class="resource-card"> 
 
      <h3> Informal Waste Workers Contribution Bangalore </h3> 
 
      <div class="resource-card-summary"> 
 
      he paper analyses the demographic profile of these waste-pickers.. 
 
      </div> 
 
      <a class="resource-link" href="#">asasaas 
 
      </a> 
 
     </div> 
 
     <div class="resource-card"> 
 
      <h3> Informal Waste Workers Contribution Bangalore </h3> 
 
      <div class="resource-card-summary"> 
 
      he paper analyses the demographic profile of these waste-pickers.. 
 
      </div> 
 
      <a class="resource-link" href="#">asasaas 
 
      </a> 
 
     </div> 
 
     <div class="resource-card"> 
 
      <h3> Informal Waste Workers Contribution Bangalore </h3> 
 
      <div class="resource-card-summary"> 
 
      he paper analyses the demographic profile of these waste-pickers.. 
 
      </div> 
 
      <a class="resource-link" href="#">asasaas 
 
      </a> 
 
     </div> 
 
     
 

 
    </div>

Answer 2

だけ.resource-card-containerためmin-widthを削除し、.resource-cardためmin-heightにheightを変更します。

.resource-card-container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 

 
.resource-card { 
 
    position: relative; 
 
    width: 28%; 
 
    border: 1px solid #e53b51; 
 
    padding: 10px; 
 
    margin: 10px; 
 
    min-height: 230px; 
 
}

<div class="resource-card-container"> 
 
    <div class="resource-card"> 
 
    <h3> Informal Waste Workers Contribution Bangalore </h3> 
 
    <div class="resource-card-summary"> 
 
     he paper analyses the demographic profile of these waste-pickers.. 
 
    </div> 
 
    <a class="resource-link" href="#"></span> 
 
    </a> 
 
    </div> 
 
    <div class="resource-card"> 
 
    <h3> Informal Waste Workers Contribution Bangalore </h3> 
 
    <div class="resource-card-summary"> 
 
     he paper analyses the demographic profile of these waste-pickers.. 
 
    </div> 
 
    <a class="resource-link" href="#"></span> 
 
    </a> 
 
    </div> 
 
    <div class="resource-card"> 
 
    <h3> Informal Waste Workers Contribution Bangalore </h3> 
 
    <div class="resource-card-summary"> 
 
     he paper analyses the demographic profile of these waste-pickers.. 
 
    </div> 
 
    <a class="resource-link" href="#"></span> 
 
    </a> 
 
    </div> 
 
    <div class="resource-card"> 
 
    <h3> Informal Waste Workers Contribution Bangalore </h3> 
 
    <div class="resource-card-summary"> 
 
     he paper analyses the demographic profile of these waste-pickers.. 
 
    </div> 
 
    <a class="resource-link" href="#"></span> 
 
    </a> 
 
    </div> 
 
</div>