UPDATE I found and fixed a typo in the code, making adjustments to both the JSFiddle and this post to show the correction. The Headline is supposed to take up 100% height but currently isn't. Still seeking feedback on this issue.
Everything looks perfect on desktop, but I'm struggling to understand why the layout doesn't stack properly with 100% height on mobile devices. Additionally, the Headline loses its color background. Check out the JSFiddle for more details.
UPDATED 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;
}
}