On my laptop, all of the content is kept in their respective containers and the heights of each column are fine. When I load the page on my iPhone, the heights become different and content overflows each other and the main content (everything after the first row of events) ends up underneath the white container. Here is the link if anyone wants to look at the html/css (I'm not sure what's relevant and don't want to clutter the post with code that doesn't need to be here).
This is what is wrong with the webpage on mobile.
Any assistance is greatly appreciated. I'm very new to flexbox so I apologize for any css code that doesn't make sense.
HTML
<div class="fluid white large">
<h2>Welcome</h2>
<p>Check <a href="#">Grapevine</a> for updated information on Board of Education presentations and topics of interest!</p>
<div>
<hr/>
<h2>Upcoming Events</h2>
<div class="grid">
<div class="fluid">
<h3>Wednesday, May 4, 2016</h3>
<ul>
<li>AP Exam: English Lit & Composition</li>
<li>AP Exam: Japanese Lang & Culture</li>
<li>AP Exam: Physics 2 - Algebra Based</li>
</ul>
</div>
<div class="fluid">
<h3>Thursday, May 5, 2016</h3>
<ul>
<li>Music Booster</li>
<li>AP Exam: Calculus AB</li>
<li>AP Exam: Calculus BC</li>
<li>AP Exam: Chinese Lang & Culture</li>
</ul>
</div>
</div>
<div class="grid">
<div class="fluid">
<h3>Friday, May 6, 2016</h3>
<ul>
<li>AP Studio Art Last Day to Submit Digital Port</li>
<li>AP Exam: German Lang & Culture</li>
<li>AP Exam: US History</li>
<li>AP Exam: European History</li>
</ul>
</div>
<div class="fluid">
<h3>Monday, May 9, 2016</h3>
<ul>
<li>AP Exam: Music Theory</li>
</ul>
</div>
</div>
<p><a class="btn" href="#">View all events</a></p>
</div>
<div>
<hr/>
<h2>News</h2>
<div class="fluid n d">
<div class="grid">
<div class="fluid" style="align-self: center;">
<img src="http://highland-k12.org/photos/news/SMALL-SM_1_srcitizendancing.jpg" />
</div>
<div class="fluid newsLarge">
<h3>Sr. Citizen Prom - Evening at Gastby's</h3>
<p>Highland CSD and Interact Club Present All Highland Sr. Citizens Welcome! Please RSVP to Carly...</p>
<p><a href="#">View the full story...</a></p>
</div>
</div>
</div>
<div class="fluid n">
<div class="grid">
<div class="fluid" style="align-self: center;">
<img src="http://highland-k12.org/photos/news/SMALL-SMIMG_6264MEDIA.jpg" />
</div>
<div class="fluid newsLarge">
<h3>Music Honor Students Perform in Annual Recital</h3>
<p>The Highland High School auditorium was alive with the sound of music during the Eighth Annual Tri-M Music Honor...</p>
<p><a href="#">View the full story...</a></p>
</div>
</div>
</div>
<div class="fluid n d">
<div class="grid">
<div class="fluid" style="align-self: center;">
<img src="http://highland-k12.org/photos/news/SMALL-SMIMG_8095MEDIA.jpg" />
</div>
<div class="fluid newsLarge">
<h3>Highland High School Names Top 10 Scholars in Class of 2016</h3>
<p>Highland High School (HHS) has announced the top ten students, including the valedictorian and salutatorian, of the... </p>
<p><a href="#">View the full story...</a></p>
</div>
</div>
</div>
<div class="fluid n">
<div class="grid">
<div class="fluid" style="align-self: center;">
<img src="http://highland-k12.org/photos/news/SMALL-SMIMG959446.jpg" />
</div>
<div class="fluid newsLarge">
<h3>Highland's Soccer Teams Raise Funds for a Team in Africa</h3>
<p>The Girls and Boys Varsity Soccer teams at Highland High School (HHS) helped get the ball rolling so that a soccer..</p>
<p><a href="#">View the full story...</a></p>
</div>
</div>
</div>
</div>
<p><a class="btn" href="#">View all events</a></p>
</div>
CSS STYLING...
#container > #brand {
overflow: hidden;
background-color: #3d3d3d;
padding: 0;
margin: 0;
list-style: none;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
display: -ms-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
text-align: center;
width: 100%;
}
#container > nav > ul {
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
display: -ms-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
margin: 0;
padding: 0;
background-color: #3d3d3d;
}
#container > nav > ul > li {
list-style: none;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
text-align: center;
font-weight: bold;
background-color: #3d3d3d;
}
#content {
margin: 10px auto;
background-color: #3d3d3d;
width: 80%;
color: white;
padding: 10px;
text-align: center;
height: 100%;
min-height: -webkit-min-content;
min-height: -moz-min-content;
min-height: min-content;
}
.grid {
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
display: -ms-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.grid > .fluid {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
height: 100%;
}
.grid > .large {
-webkit-box-flex: 3;
-webkit-flex-grow: 3;
-ms-flex-positive: 3;
flex-grow: 3;
border: 2px solid gray;
min-height: -webkit-min-content;
min-height: -moz-min-content;
min-height: min-content;
}
.grid > .newsLarge {
-webkit-box-flex: 4;
-webkit-flex-grow: 4;
-ms-flex-positive: 4;
flex-grow: 4;
}
