0

I have a loader screen which is just simply a white screen at this point. It all works fine on desktop but when on mobile view the whole hero header either disappears or shrinks entirely.

NOT DESIRED With Code

DESIRED enter image description here

I'm looking for a line of code that might just disable just the javascript on this page when in mobile view. I don't want to disable javascript all together as I have a separate js file which will be needed.

I believe it is occuring due to one element in particular:

document.getElementById("myDiv").style.display = "block";

Here is the full code anyhow.

<style>
/* Center the loader */
.animate-bottom {
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
}


</style>

</head>
<body onload="myFunction()" >

<div id="loader"></div>

<div style="display:none;" id="myDiv" class="animate-bottom">

//CONTENT OF THE PAGE 

    </div>
<script>
var myVar;

function myFunction() {
  myVar = setTimeout(showPage, 800);
}

function showPage() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("myDiv").style.display = "block";
}
</script>
</body>
Steve Roe
  • 63
  • 1
  • 9
  • 1
    firstly check where your page is opened i.e to detect web or mobile device by https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser using the link then disable your desired css – p u Jan 25 '19 at 07:24

1 Answers1

0

I have figured it out:

I changed this:

document.getElementById("myDiv").style.display = "block";

to this:

  document.getElementById("myDiv").style.display = "initial";
Steve Roe
  • 63
  • 1
  • 9