Fullpage js mediaqueries
<p>I'm creating a full page js. I've 5 section, these 5 section have full of content. I've wrote the media query based on the width, but when I take it some devices with small height, the content lags to the next section, so the user can't see it.</p>

<p>The breakpoints I'm using are,</p>

<pre><code>@media only screen and (min-width : 0px) {
@media only screen and (min-width : 320px) {
@media only screen and (min-width : 480px) {
@media only screen and (min-width : 768px) {
@media only screen and (min-width : 992px) {
@media only screen and (min-width : 1200px) {
@media only screen and (min-width : 1600px) {
</code></pre>

<p>I would like to know maximum and minimum possible height for each breakpoint, so that I can write the media query accordingly. </p>

<p>Edit**
Here is the HTML,</p>

<pre><code>&lt;div id="fullpage"&gt;
&lt;div class="section" id="section0"&gt;
  &lt;div id="bgslider-text" class="col-xs-12 col-sm-12 col-lg-12"&gt;
      &lt;h2 class="animated fadeInRightBig option"&gt; 
          Testing aa
      &lt;/h2&gt;
      &lt;h2 class="animated fadeInRight options"&gt;
          TEst
      &lt;/h2&gt;
      &lt;h3 class="animated fadeInRight opt"&gt;
          Animated text
      &lt;/h3&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="section" id="section1"&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>