I recently wrote a custom Qualtrics survey using Javascript and HTML code, which I hope to distribute on mobile devices. Although I can run the survey on an Iphone, when running the survey on an android everything is blank besides the first page (which is an introduction page of text). Does anybody know why this might be happening? I have enable Javascript on the Android but it still won't show. Below are my HTML code:



HTML

<code>

<style>



div.border {

position: absolute;

width: 350px;

height: 475px;

border: 0px solid black;

}



div.labright {

position: absolute;

bottom: 1%;

right: 1%;

line-height: 110%;

font-size: 30px;

font-weight: bold;

text-align: center;

font-family: arial;

}



div.lableft {

position: absolute;

bottom: 1%;

left: 1%;

line-height: 110%;

text-align: center;

font-size: 30px;

font-weight: bold;

font-family: arial;

}



div.load {

position: absolute;

top: 55%;

width: 100%;

display: block;

text-align: center;

font-size: 16px;

font-weight: normal;

font-family: "Times New Roman";

}



div.instruct {

position: absolute;

text-align: center;

bottom: 0%;

font-size: 16px;

font-family: "Times New Roman";

display: none;

line-height: 110%;

padding-top: 10px;

padding-right: 10px;

padding-bottom: 10px;

padding-left: 10px;

}



h2.center {

position: absolute;

text-align: center;

width: 100%;

line-height: 100%;

top: 29%;

font-size: 30px;

font-weight: bold;

font-family: arial;

}



p.note {

position: absolute;

text-align: center;

bottom: 1%;

font-size: 16px;

width: 100%;

line-height: 100%;

font-family: "Times New Roman";

}



h2.err {

position: absolute;

display: block;

text-align: center;

width: 100%;

line-height: 100%;

top: 1%;

font-size: 80px;

font-weight: bold;

font-family: arial;

color: red;

}



</style>



<div class="border">





<div class="lableft" id="left">

<br><br>Flowers<br><br>

</div>





<div class="labright" id="right">

<br><br>Insects<br><br>

</div>





<h2 class="center" id="message"><br><br><br>+</h2>

<h2 class="err" id="error"></h2>



<div class="load">

<p id="loading">Loading all the content...

<br>

<br>

This should take less than 1 minute</p>

</div>





<p class="note" id="note"></p>

</div>



<div style="opacity: 0; font-size:300px; color:#fff;"><p>x</p></div>

</code>