I am experiencing an issue where my login screen does not scroll on PC, but when accessed on mobile, it starts to scroll. I have tried implementing various solutions recommended in other threads on this platform, but unfortunately, nothing seems to be working. This is also one of my initial attempts at coding in HTML.
<!DOCTYPE html>
<html>
<head>
<title>Enter your login and password</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body,td { font-family: Arial; color: #666666; font-size: 1.00em; font-weight: normal; font-style: normal; }
body { text-align:center; background-color: transparent; }
</style>
</head>
<body>
<!-- 1357 -->
<!--form-start-->
<div style="text-align: center;">
<div style="box-sizing: border-box; display: inline-block; width: auto; max-width: 600px; background-color: #FFFFFF; border: 1px solid #3A3A3A; border-radius: 5px; box-shadow: 0px 0px 8px #3A3A3A; margin: 50px auto auto;" id="ap_form_box">
<div style="background: #3A3A3A; border-radius: 5px 5px 0px 0px; padding: 15px 25px; position: relative"><span style="font-family: Arial; color: #FFFFFF; font-size: 1.40em; font-weight:bold; text-transform: none" id="ap_form_head">Enter your login and password</span></div>
<div style="background: #FFFFFF; padding: 15px" id="ap_style">
<style type="text/css" scoped>
#ap_style td { text-align:left; font-family: Arial; color: #666666; font-size: 1.00em; border: 0px; }
#ap_style td a { color: #666666; }
#ap_style input,select { border: 1px solid #CCCCCC; border-radius: 5px; color: #666666; display: inline-block; font-size: 1.00em; box-sizing: border-box; padding: 5px; }
#ap_style input[type="text"], input[type="password"], input[type="email"], input[type="number"], select { width: 100%; background-color: #FFFFFF; }
#ap_style input[type="button"], input[type="reset"], input[type="submit"] { height: auto; width: auto; cursor: pointer; box-shadow: 0px 0px 5px #3A3A3A; background: buttonface; float: right; text-align:right; margin-top: 10px; margin-left:7px;}
#ap_style input[type="checkbox"], input[type="radio"] { height: 1.00em; width: 1.00em; }
#ap_style table.center { margin-left:auto; margin-right:auto; border: 0px; }
#ap_style .error { font-family: Arial; color: #FF3333; font-size: 1.00em; padding-bottom:10px; }
#ap_style .error_note { display: block; font-family: Arial; color: #FF3333; font-size: 0.85em; padding-top:3px; }
#ap_style .error_box { border: 1px solid #FF3333; }
.ap_footer { width:100% text-align: center; font-size:smaller; background: #3A3A3A; color: #FFFFFF } .ap_footer a { color: #FFFFFF; font-style: italic; }
* { target-new: tab ! important }
</style>
<form method="post" action="https://www.authpro.com/auth/nilsie12/" name="aform" >
<input type="hidden" name="action" value="login">
<input type="hidden" name="user" value="nilsie12">
<input type="hidden" name="hide" value="">
<table id='ap_table_login' class='center'>
<tr style='display:none' id='ap_form_err'><td colspan='2' id='ap_form_errmes' class='error'>You have entered incorrect login or password.<br> Please try again.<br><br></td></tr>
<tr style='display:none' id='ap_form_inf'><td colspan='2' id='ap_form_infmes'></td></tr>
<tr class='ap_form_inp'><td>Username:</td><td><input type="text" name="login" value="" autocorrect="off" autocapitalize="off" autocomplete="username"></td></tr>
<tr class='ap_form_inp'><td>Password:</td><td><input type="password" name="password" autocomplete="current-password"></td></tr>
<tr><td> </td><td align='left'><input type='checkbox' name='remember' value='1'> Remember me</td></tr>
<tr id='ap_form_isb'><td> </td><td><input type="submit" id='ap_form_btn' value="Enter"></td></tr>
<tr><td colspan=2> </td></tr>
<tr><td colspan='2' id='ap_form_lostmes'><a href="https://www.authpro.com/auth/nilsie12/?action=lost">Forgot your username or password?</a></td></tr>
</table>
</form>
<script type="text/javascript" src="https://www.authpro.com/js/aform.js"></script>
</div></div></div>
</html>
Initially, the login screen did not display scrolling behavior, which was desirable on desktop. However, upon testing it on mobile, a scroll bar appeared. You can see the screenshot here: https://i.stack.imgur.com/z4EWz.png
This has led me to explore different options and apply code snippets shared in similar threads, but so far, no solution has addressed the scrolling issue effectively.