手機上的網格佈局問題

Question

我的網站已準備就緒，但仍有1個問題讓我反感。每當我認爲在移動設備上我的網站，例如iPhone 6此外，在3X1網格佈局僅顯示1列，而不是我現在不能找出原因:(

HTML：

<div class="project-showcase"> 
     <div class="container"> 
      <h2>Latest Work, Projects <br> & ideas</h2> 
      <hr> 
      <div class="grid"> 
       <div class="col-3"><img src="http://placehold.it/300x180"> 
        <h3>Title of project</h3> 
        <p>Lorem ispum uion et lism un lium isum ispum uion et lism ispum uion et lism .</p> 
       </div> 
       <div class="col-3"><img src="http://placehold.it/300x180"> 
        <h3>Title of project</h3> 
        <p>Lorem ispum uion et lism un lium isum ispum uion et lism ispum uion et lism .</p> 
       </div> 
       <div class="col-3"><img src="http://placehold.it/300x180"> 
        <h3>Title of project</h3> 
        <p>Lorem ispum uion et lism un lium isum ispum uion et lism ispum uion et lism .</p> 
       </div> 
      </div> 
     </div> 
    </div> 

的CSS：

.project-showcase h2 { 
    color: #222; 
    font-size: 40px; } 
.project-showcase hr { 
    margin: 8vh 0 8vh 0; 
    border: 0; 
    border-bottom: 4px solid #222; 
    max-width: 5rem; } 

.grid { 
    display: flex; 
    flex-direction: row; 
    width: 100%; } 

.col-3 { 
    max-width: 33.33%; 
    flex-basis: 33.33%; 
    margin: 0 10px; } 
    .col-3 img { 
    width: 100%; } 
    .col-3 h3 { 
    font-size: 20px; 
    font-weight: 700; 
    margin: 5px 10px; } 
    .col-3 p { 
    margin: 0 10px; } 

@media screen and (max-width: 48em) { 
    .grid { 
    display: flex; 
    flex-direction: column; 
    width: 100%; } 

    .col-3 { 
    max-width: 100%; 
    flex-basis: 100%; 
    height: 100%; 
    text-align: center; } 
    .col-3 h3 { 
     margin: 25px; } 
    .col-3 p { 
     margin: 15px; } } 

網站網址：www.jacksewell.uk

Answer 1

我在這裏更新了我的代碼：http://codepen.io/FluidOfInsanity/pen/RRgvRJ

我改變了HR標籤（你會想惹它更多）本

project-showcase hr { 
    margin: 8px 0 16px 0; 
    border: 0; 
    border-bottom: 4px solid #222; 
    max-width: 5rem; 
} 

保證金與原來的大小搞亂起來我的手機上。

我更新了手機尺寸是：

@media screen and (max-width: 48em) { 
.grid { 
    flex-direction: column; 
    min-height: 100%; 
    flex: 1; 
    flex-direction: column; 
} 
.col-3 { 
    max-width: 100%; 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
} 
.col-3 h3 { 
    margin: 15px; 
    margin-bottom: 0; 
} 
.col-3 p { 
    margin: 15px; 
} 
}