CSS overlay does not work on mobiles
<p>I use a code I found on the web to have a CSS overlay.
The overlay is used to display help to a graph.</p>

<p>On desktops it works great.</p>

<p>I can set the height so that all the text fits inside the overlay.</p>

<p>But if I look at it on a mobile phone the overlay seems to have a set height that I can't change.</p>

<p>Only about half of the text has a white background, and that makes it hard to read.</p>

<p>How can I change it so that mobile users also can read all the text?</p>

<p>The code is pasted below.
If you wish to test it on my webpage go to www.hoppvader.nu</p>

<p>But to be able to see this chart and the overlay you need to accept cookies and set some settings on the page.</p>

<p>The settings icon on top right, and set Visa lufttrycksstatistik to "Ja".</p>

<p>Accept cookies in the checkbox and create the cookie. </p>

<p>The cookie can later be removed on the same page but with the button on the right side (not visible if you don't have a cookie).</p>

<p>CSS:</p>

<pre><code>    #overlay{ /* we set all of the properties for are overlay */
                height:800px;
                width:80%;
                margin:0 auto;
                background:white;
                color:black;
                padding:35px;
                position:absolute;
                top:5%;
                left:7%;
                z-index:1000;
                display:none;
                /* CSS 3 */
                -webkit-border-radius:10px;
                -moz-border-radius:10px;
                -o-border-radius:10px;
                border-radius:10px;
            }

            #mask{ /* create are mask */
                position:fixed;
                top:0;
                left:0;
                background:rgba(0,0,0,0.6);
                z-index:500;
                width:100%;
                height:100%;
                display:none;
            }
            /* use :target to look for a link to the overlay then we find are mask */
            #overlay:target, #overlay:target + #mask{
                display:block;
                opacity:1;
            }
            .close{ /* to make a nice looking pure CSS3 close button */
                display:block;
                position:absolute;
                top:-20px;
                right:-20px;
                background:red;
                color:white;
                height:40px;
                width:40px;
                line-height:40px;
                font-size:35px;
                text-decoration:none;
                text-align:center;
                font-weight:bold;
                -webkit-border-radius:40px;
                -moz-border-radius:40px;
                -o-border-radius:40px;
                border-radius:40px;
            }
            #open-overlay{ /* open the overlay */
                padding:5px 5px;
                background:black;
                color:white;
                text-decoration:none;
                display:inline-block;
                margin:0px;
                -webkit-border-radius:10px;
                -moz-border-radius:10px;
                -o-border-radius:10px;
                border-radius:10px;
            }


HTML:
&lt;a href='#overlay' id='open-overlay'&gt;&lt;img src='../barchart.php?ICAO=ESNS'&gt;&lt;/img&gt;&lt;/a&gt;
    &lt;div id='overlay'&gt;
                &lt;a href='#' class='close'&gt;&amp;times;&lt;/a&gt;
                &lt;div style='height:-5%'&gt;&lt;/div&gt;
                &lt;center&gt;&lt;h2 style='font-size:35px'&gt;Lufttryck&lt;/h2&gt;&lt;/center&gt;
                Lufttrycket har stor betydelse för hur vädret kommer att bli.&lt;br&gt;
                Det finns många andra anledningar också förutom lufttrycket men nedan följer generella 'regler' för lufttrycksförändringar.&lt;br&gt;
                &lt;br&gt;
                &lt;br&gt;
                &lt;p11&gt;Lufttrycket ökar&lt;/p11&gt;&lt;br&gt;
                Om lufttrycket ökar men inte för snabbt (mindre än 1 hPa/h), tyder det på att vädret kommer att bli bättre.&lt;br&gt;
                Om lufttrycket ökar snabbt (mer än 1 hPa/h), tyder det på bättre väder på kort sikt men kan också betyda att en högtrycksstorm är på väg. &lt;br&gt;
                &lt;br&gt;
                &lt;br&gt;
                &lt;p11&gt;Lufttrycket sjunker&lt;/p11&gt;&lt;br&gt;
                Om lufttrycket sjunker konstant och långsamt (mindre än -1 hPa/h) kommer vädret troligtvis att försämras långsamt.&lt;br&gt;
                Om lufttrycket sjunker snabbt (mellan -1 till -2 hPa/h) kan ni räkna med starka vindar.&lt;br&gt;
                Om det sjunker mer än -2 hPa/h då kan ni räkna med mycket starka vindar.&lt;br&gt;
                &lt;br&gt;
                &lt;br&gt;
                &lt;p11&gt;Hur avläser jag diagrammet?&lt;/p11&gt;&lt;br&gt;
                Lufttrycket i värde skrivs ut ovanför var stapel.&lt;br&gt;
                Värdet under stapeln är när värdet uppmättes. Dagen står överst och tiden under.&lt;br&gt;
                Tänk på att lufttrycket varierar lite under en dag och behöver inte betyda väderförändringar.&lt;br&gt;&lt;br&gt;
                Alla stationer uppdateras när någon av hoppvädersidorna visas.&lt;br&gt;
                Om en station inte visar några staplar alls beror det på att stationen inte varit igång sedan mätningarna började sparas.&lt;br&gt;
            &lt;/div&gt;
            &lt;div id='mask' onclick='document.location='#';'&gt;&lt;/div&gt;
</code></pre>