モバイルでのグリッドレイアウトの問題

Question

私のサイトは公開準備が整っていますが、私には1つの問題があります。

<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> 

：、3×1グリッドレイアウトが唯一の代わりに3の1列を表示するたびに、私はiPhone 6プラス例えば、モバイルデバイス上で、私のサイトを見る私はなぜ:(

HTMLを見つけることができません

の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; } } 

サイトURL：www.jacksewell.uk私はここに私のコードを更新しました

Answer 1

：http://codepen.io/FluidOfInsanity/pen/RRgvRJ

私は元の大きさは、自分の携帯電話でそれをめちゃくちゃにされたと、この

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; 
} 
}