Website Freezing When Viewing It On A Mobile Device-CodePudding

The HTML and CSS I've used to create a website are listed below. I'm currently trying to get it online, but I am having trouble running it on a mobile device. The website works without any problems on my Macbook, but when I try running it via a MAMP server on my iPhone 12, it crashes (freezing and will no longer load properly) after viewing a few pages. When my iPhone is connected to Wi-Fi, it runs as it should. It doesn't run as it should when connected to 4G, even with a good connection.

Would this have anything to do with my website being too heavy to run smoothly on a mobile device? Any advice would be much appreciated.

<!DOCTYPE html>
<html lang="en">  
    
<meta name="viewport" content="width=device-width, initial-scale=1.0;" charset="utf-8">
    
<body>
    
<style>html{visibility: hidden; opacity: 0;}</style>
    
<title>MORIKOBOSHI・</title>
      
<div >
     
<div >
<input id="cp_toggle03" type="checkbox"/>
<div >
<label for="cp_toggle03" >
<span></span>
</label>
</div>
<label id="h-menu_black"  for="cp_menuicon"></label>
<div id="body" ></div>
        
<header >
        
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
            
<li style="border-bottom: .05px solid lightgray;"><a href="#">Home</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="#">Blog</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="#">About This Website</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="#">Bibliography</a></li>
    
            
<div > 
            
<form id="frmSearch"  method="get" action="default.html" style=" padding-right: 10px; padding-top: 20px; text-align: center; position: inline;">
<input  id="txtSearch" type="text" placeholder="Custom Google Search" name="serach_bar" size="31" maxlength="255" value="" style="top: 185px; width: 180px; height: 26px;">
<input  type="submit" name="submition" value="Search" style="padding-left: 5px; top: 153px; height: 25px; width: 50px; display: inline-flex; justify-content: center;">
<input  type="hidden" name="sitesearch" value="default.html">    

</form>
</div>    

    
<script type="text/javascript">
 document.getElementById('frmSearch').onsubmit = function() {
 window.location = 'http://www.google.com/search?q=site:morikoboshi.com'   document.getElementById('txtSearch').value;
        return false;
    }
 
</script>


<script>
 document.getElementById('cp_toggle03').onchange = function() {
 if (document.getElementById('cp_toggle03').checked) {
 document.body.style.overflow = "hidden";
  } else {
 document.body.style.overflow = "";
  }
} 
 
if(!!window.performance && window.performance.navigation.type == 2)
{
    window.location.reload();
}
</script>

</ul>    
</nav>
</header>     
               
<div >
    
 <br><br><h1 style="text-align: center; font-size: 40px;">◯◯◯◯</h1>
    <br><p style="text-align: justify; font-size: 16px;"></p>
    
 <p style="text-align: center; font-size: 13px;">Author: ◯◯◯◯</p>
 <p style="text-align: center; font-size: 13px;">Photos/Videos Taken：◯◯◯◯/◯◯/◯◯</p>
    
 <br><br><p style="text-align: justify; font-size: 16px;">    
    
    #
 </p>    
        
</div>
        
<br><br><div >
    
  <a href="#"><img src="#" alt="#" width="90%"></a>
 
 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>
    
 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>
 
 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>

 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>
    
 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>

 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>
    
 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>
    
 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>
    
 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>
    
</div>
    
<br><br><footer  style="font-size: 12px;">MORIKOBOSHI© | <a href="#">日本語</a></footer>

</div>
</div>
      
<style>
    
html {visibility: visible;
      opacity: 1;}
    
.body{background-color: white;
      font-family: sans-serif;}
    
 .searchbar{float: right;}
    
 .image{text-align: center;}
    
 .setsumei{margin-left: 20px;
           margin-right: 20px;}
    
 .footer{width: 100%; 
           height: 40px; 
           text-align: center;
           border-top: 1px solid black; 
           position: absolute;
           bottom: 0;
           padding: 10px;}
    
 .page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -40px; 
}

 .page-wrap:after {
  content: "";
  display: block; 
  }

 .site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 20px; 
}

 .site-footer {
  text-align: center;
  border-top: 1px solid black;
  padding: 10px;
}
        

 *, *:before, *:after {
    padding-left: 0;
    margin: 0;
    box-sizing: border-box;
    
}    

 ol, ul {
    list-style: none;
}

 a {
    text-decoration: none;
    color: black;
}
    
 .cp_cont {
    height: auto;
}
    
/* menu */
 .cp_offcm03 {
    position: relative;
    z-index: 5000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    width: 100%;
    height: auto;
    padding-top: 0;
    -webkit-transition: transform 0.3s ease-in;
            transition: transform 0.3s ease-in;
    text-align: center;
    color: black;
    background-color: white;
}
 .cp_offcm03 nav,
 .cp_offcm03 ul {
    height: 100%;
}

 .cp_offcm03 li {
    display: inline-block;
    margin-right: -6px;
}

 .cp_offcm03 a {
    display: block;    
    padding: 15px 45px;
    margin-bottom: -5px;
    -webkit-transition: background-color .3s ease-in;
            transition: background-color .3s ease-in;
}
    
 .cp_offcm03 a:hover {
    background-color: lightgray;
}

/* menu toggle */
 #cp_toggle03 {
    display: none;
}

 #cp_toggle03:checked ~ .cp_offcm03 {
    -webkit-transform: translateX(0);
                    transform: translateX(0);
}

 #cp_toggle03:checked ~ .cp_container {
    -webkit-transform: translateX(0);
                    transform: translateX(0);
}

 .cp_mobilebar {
    display: none;
    
}

/* content */
 .cp_container {
    position: relative;
    top: 0;
    padding: 35px auto;
    -webkit-transition: transform .3s ease-in;
            transition: transform .3s ease-in;
}   

 .cp_content {
    margin: 0 auto;
    padding: 20px;
    height: 65vh;
    text-align: center;

}

@media (max-width: 1130px)and (min-width: 280px) {
/* menu */
 .cp_offcm03 {
        position: fixed;
        left: -250px;
        overflow-y: hidden;
        width: 250px;
        height: 100%;
        padding-top: 40px;
        color: black;
        background-color: white;
        z-index: 1000;
    }
    
    
 .cp_offcm03 nav {
        background: white;
        border-right: 0.5px solid lightgray;
        margin-left: -210px;
    }
    
    
    
 .cp_offcm03 li {
        display: block;
        margin-right: 0;}

        
        
 .cp_offcm03 a {
        padding: 20px;
        
    }
    
/* menu toggle */
 .cp_mobilebar {
        display: block;
        z-index: 2000;
        position: relative;
        top: 0;
        left: 0;
        padding: 0 25px;
        width: 100%;
        height: 40px;
        background-color: white;
        border-bottom: .05px solid lightgray;
        
        
    }
    
 .cp_menuicon {
        display: block;
        position: relative;
        width: 25px;
        height: 100%;
        cursor: pointer;
        -webkit-transition: transform .3s ease-in;
                transition: transform .3s ease-in;
    }
 .cp_menuicon > span {
        display: block;
        position: absolute;
        top: 55%;
        margin-top: -0.3em;
        width: 100%;
        height: 0.2em;
        border-radius: 1px;
        background-color: black;
        -webkit-transition: transform .3s ease;
                transition: transform .3s ease;
    }
 .cp_menuicon > span:before,
 .cp_menuicon > span:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 1px;
        background-color: black;
        -webkit-transition: transform .3s ease-in;
                transition: transform .3s ease-in;
    }
    
 .cp_menuicon > span:before {
        -webkit-transform: translateY(-0.6em);
                transform: translateY(-0.6em);
    }
 
 .cp_menuicon > span:after {
        -webkit-transform: translateY(0.6em);
                transform: translateY(0.6em);
    }

 #cp_toggle03:checked   .cp_mobilebar .cp_menuicon { 
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
    }
    
 #cp_toggle03:checked   .cp_mobilebar span:before,
 #cp_toggle03:checked   .cp_mobilebar span:after {
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
    }
    
 #cp_toggle03:checked ~ .cp_offcm03 {
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
    }
    
 #cp_toggle03:checked ~ .cp_container {
        -webkit-transform: translateX(250px);
                transform: translateX(250px);
    }
    
 input:checked ~ #h-menu_black {
    display: block;/*カバーを表示*/
    opacity: .6;
}
    
 #h-menu_black {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .7s ease-in-out;
}
    
/* content */
 .cp_container {
        top: 60px;
        height: 92vh;
        text-align: center; 
    } 
    
 .noscroll{
        overflow: hidden;
        position: fixed;
    }
    
</style> 
      
</body>
</html>

CodePudding user response：

I would like to thank everyone for their help in trying to solve this issue.

After deleting bits of CSS to see how my website runs without it I found the solution. It was the html { visibility: hidden; opacity: 0; } line of code that was preventing my website from running smoothly on the mobile version of Google Chrome. Getting rid of this line of code stopped my website from freezing.