CherryTree

Okay, so after searching for the 50th time, I somehow stumbled across this Q&A that I hadn't seen before. So tweaking that, I got:
Header:
<div class="logoload"></div> <style> .logoload {   /* SET BACKGROUND COLOR */   background-color: #E6E4E8;   /* SET BACKGROUND SIZE */   background-size: 1000px;   position: fixed;   left: 0px;   top: 0px;   width: 100%;   height: 100%;   z-index: 9999;   background-position: center;   background-repeat: no-repeat; } </style> <span id="top"></span> Footer:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script type="text/javascript">     $(document).ready(function() {      var arr = ["https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7c90a287971afb84858/1626073033610/LP+quote+1.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7ccaa30721e650da8c5/1626073036294/LP+quote+2.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7d2f229ba2ea8557b8e/1626073042282/LP+quote+3.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7d4dc37083541d6b11d/1626073044510/LP+quote+4.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7d6c22c005c93572b3a/1626073046893/LP+quote+5.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7d9aa30721e650da8da/1626073049297/LP+quote+6.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7db320dbd0de29ebff0/1626073051316/LP+quote+7.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7dd66be7e490f2e65a8/1626073053378/LP+quote+8.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7e0787dde1a90cc9e70/1626073056313/LP+quote+9.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7e419a9f87deb91cefd/1626073060561/LP+quote+10.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7e7566ded7d61cab84d/1626073063392/LP+quote+11.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7ea2f3c4128e1a8c7e1/1626073066224/LP+quote+12.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7edf4fe78435a5864d4/1626073069328/LP+quote+13.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7f0f4fe78435a5864d5/1626073072035/LP+quote+14.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7f22f3c4128e1a8c7ef/1626073074813/LP+quote+15.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7f52c5c2f6215e738b9/1626073077525/LP+quote+16.png", "https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7f892abcc18c414639a/1626073080218/LP+quote+17.png",     ];      document.querySelector(".logoload").style.backgroundImage = "url('"+arr[Math.floor(Math.random() * arr.length)]+"')"; });    $(window).load(function() {     $(".logoload").delay(500).fadeOut("slow"); }) </script> It works! Except, it doesn't look right on mobile, and I want to disable it for mobile. That brings me to the question I asked here: is there a way to disable that javascript code for mobile devices?

That part worked! But on the mobile, it's still switching spots. I'm wondering if it has something to do with the other code I have in there:
/*move product description*/ <script>   jQuery(document).ready(function($) { $('.ProductItem .ProductItem-additional').insertAfter('.ProductItem-details-excerpt'); }); </script>  

I checked by taking out that code, and in fact that is what is causing it to flip on mobile. I added an accordion for the additional information and removed the above code, and that seems to be making it look the way I want. Thanks so much for helping me make the additional info smaller!

Site URL: http://www.cherrytreeinteriordesign.com
I have a js code that animates the header on all but my mobile pages. The code is as follows:
<script> if (document.documentElement.clientWidth <740) {  window.location = "/mobile"; } </script> <script> (function(){     window.addEventListener('load', function() {     var headerElements = document.querySelectorAll('header a')     function fadeIn(element, time, delay) {       var keyframes = {opacity: [0,1]};       var timing = {         duration: time,         fill: 'both',         easing: 'ease',         delay: delay       };         element.animate(keyframes, timing)     }     function animateElements(element,animation,time,delay) {         element.forEach((item,index) => {             var delays = index*delay;             item.style.display = 'inline-block';             animation(item,time,delays)         })     };     //Call animateElements function and set your timing and delay.     animateElements(headerElements,fadeIn,2000,300);       }) })() </script> I also have css animation for text that pops up on the home screen. I have it basically timed out to pop up when the header animation is complete, but depending on the load it is sometimes a bit off. (You can see it on my homepage on a desktop). I'm not sure if there is a way to point the css animation code to begin when the js code animation starts. The css code is here:
.fade-in-text {   display: inline-block;   font-family: FuturaPT, Helvetica, sans-serif;   font-weight: 800;   letter-spacing: 0.4em;   text-align: center;   font-size: 6em;   color: white;   opacity: 0;   animation: fadeIn linear 300ms;   animation-delay: 5650ms;   -webkit-animation: fadeIn linear 300ms;   -webkit-animation-delay: 5650ms;   -webkit-animation-fill-mode: forwards;   -moz-animation: fadeIn linear 300ms;   -moz-animation-delay: 5650ms;   -moz-animation-fill-mode: forwards;   -o-animation: fadeIn linear 300ms;   -o-animation-delay: 5650ms;   -o-animation-fill-mode: forwards;   -ms-animation: fadeIn linear 300ms;   -ms-animation-delay: 5650ms;   -ms-animation-fill-mode: forwards; } @keyframes fadeIn {   0% {opacity:0;}   100% {opacity:1;} } @-moz-keyframes fadeIn {   0% {opacity:0;}   100% {opacity:1;} } @-webkit-keyframes fadeIn {   0% {opacity:0;}   100% {opacity:1;} } @-o-keyframes fadeIn {   0% {opacity:0;}   100% {opacity:1;} } @-ms-keyframes fadeIn {   0% {opacity:0;}   100% {opacity:1;} } Anyone have any idea how to do this?
Thanks!

Site URL: http://www.cherrytreeinteriordesign.com
Hi! I'm trying to make loading pages that will load a random image each time. The code I have so far is code I pulled from elsewhere (here) and tweaked - see below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <div class="logoload"></div> <style> .logoload {   /* SET BACKGROUND COLOR */   background-color: #E6E4E8;   /* SET BACKGROUND SIZE */   background-size: 500px;   position: fixed;   left: 0px;   top: 0px;   width: 100%;   height: 100%;   z-index: 9999;   background-position: center;   background-repeat: no-repeat;   background-image: url("https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebd829c22c005c9356a5d4/1626069033592/home-page-loading-screen.jpg/"); } </style> <script type="text/javascript"> $(window).load(function() {     $(".logoload").delay(500).fadeOut("slow"); }) </script> That code does work for a single image, but I don't know how to modify it to do what I want. I'd like the background image to randomize to be one of several images I have. Any ideas how I do this? Please be gentle - I am below newbie status when it comes to coding, so explain like I don't know anything (because I don't).
Thanks in advance!