50％部分不會堆疊在手機上

Question

編輯 我糾正了一個錯字，並更新了JSFiddle和本文以反映更改。標題應該佔據100％的高度，而不是。仍在尋找想法。

這看起來就像我想在桌面上一樣。我無法弄清楚爲什麼在移動設備上它不會佔用100％的高度和堆疊在一起。標題也失去了色彩背景。 Here's the JSFiddle

HTML

<div class="about-header"> 
     <h2>Headline</h2> 
    </div> 

    <div class="about-section"> 

     <div class="about-text"> 
     <p>The first chunk of text to let users know they gotta read a 
     little bit. If they want. It's not mandatory or anything.</p> 

     <p>The second group of text, a nice chunk of descriptive text that 
     explains some more about this website. It really hopes you can help 
     me troubleshoot this problem that I am facing.</p> 

     <p>Another grouping of text goes right in this little section here 
     that should go on for a while.</p> 
    </div><!-- END ABOUT TEXT --> 

    </div> <!-- END ABOUT SECTION--> 
</section> 
</div><!-- END CONTAINER --> 

CSS

*{ 
    margin:0; 
    padding:0; 
} 

html{ 
    font-size:62.5%; 
} 

html, 
body{ 
    height:100%; 
    background-color:#FFF; 
    color:#000; 
    font-family:"Arial", "Helvetica", sans-serif; 
    font-size:12px; 
    font-size:1.2rem; 
} 

.container{ 
    width:100%; 
    height:100%; 
} 

.container *{ 
    box-sizing:border-box; 
} 

.row{ 
    min-width:85%; 
    margin:0 auto; 
} 

.row:before, 
.row:after{ 
    content:""; 
    display:table; 
    clear:both; 
} 

#about{ 
    height:100%; 
} 

.about-header{ 
    width:100%; 
    height:100%; 
    background-color:lightblue; 
    position:relative; 
} 

.about-header h2{ 
    display:table-cell; 
    vertical-align:middle; 
    text-align:center; 
    text-transform:uppercase; 
} 

.about-section p{ 
    font-size:1rem; 
    padding-left:1.2rem; 
    padding-right:3rem; 
    padding-bottom:1.5rem; 
} 

.about-text{ 
    display:table-cell; 
    vertical-align:middle; 
} 

.about-section{ 
width:100%; 
height:100%; 
position:relative; 

}

/**** MEDIA QUERY****/ 
@media all and (min-width:500px){ 

.about-section{ 
    width:50%; 
    height:100%; 
    background-color:#FFF; 
    left:50%; 
    display:table; 
    position:absolute; 
} 

.about-header{ 
    width:50%; 
    height:100%; 
    background-color:lightblue; 
    right:50%; 
    display:table; 
    position:absolute; 
} 

} 

Answer 1

你有一個錯字。

.about-head{ 
    width:100%; 
    height:100%; 
    background-color:lightblue; 
    position:relative; 
} 

應該是：

.about-header { 
    width:100%; 
    height:100%; 
    background-color:lightblue; 
    position:relative; 
}