Scrolling issues on Mobile - html

Question

I need help with my contact form, the screen isn't in fixed position and some element is making the page being able to scroll on mobile when its not supposed to since everything is aligned in the center. I tried removing padding in container in the Mobile query but that did not work and I can't seem to find out why its scrolling, I changed the viewport to 100% width and that fixed the issue but that will not work in the long run since my website is supposed to be responsive and I changed the viewport back to initial scale and everything as seen in the HTML code but the scrolling issue comes back.
CSS and HTML
#media screen and (max-width: 500px) /* Mobile */ {
* {
box-sizing: border-box;
}
#navigation {
display: none;
}
input[type=text3], select, textarea {
width: 55%; /* Full width */
padding: 30px; /* Some padding */
margin-top: 0px;
outline: none;
color: #ff0055;
text-align: center;
border: 1px solid #f3f3f3; /* Gray border */
border-radius: 100px; /* Rounded borders */
}
input[type=text2], select, textarea {
width: 55%; /* Full width */
padding: 20px; /* Some padding */
color: #ff0055;
outline: none;
text-align: center;
border: 1px solid #f3f3f3; /* Gray border */
border-radius: 100px; /* Rounded borders */
}
input[type=text2]:hover, select, textarea {
width: 55%; /* Full width */
padding: 20px; /* Some padding */
color: #ff0055;
text-align: center;
border: 2px solid #ff0055; /* Gray border */
border-radius: 100px; /* Rounded borders */
transition: all 0.3s ease 0s;
}
input[type=text3]:hover, select, textarea {
width: 55%; /* Full width */
padding: 30px; /* Some padding */
margin-top: 0px;
color: #ff0055;
text-align: center;
border: 2px solid #ff0055; /* Gray border */
border-radius: 100px; /* Rounded borders */
transition: all 0.3s ease 0s;
}
input[type=text], select, textarea {
width: 55%; /* Full width */
padding: 20px; /* Some padding */
text-align: center;
outline: none;
color: #FF0055;
border: 1px solid #f3f3f3; /* Gray border */
border-radius: 100px; /* Rounded borders */
}
input[type=text]:hover, select, textarea {
width: 55%;
padding: 20px; /* Some padding */
text-align: center;
border: 2px solid #ff0055; /* Gray border */
border-radius: 50px; /* Rounded borders */
transition: all 0.3s ease 0s;
}
input[type=submit] {
background-color: #001FFF;
color: white;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
border: none;
cursor: pointer;
border-color: #000000;
text-align: center;
display: inline-block;
text-decoration: none;
text-shadow: none;
margin: 50px 175px;
padding: 10px 50px;
border: none;
border-radius: 100px;
outline: none;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #0019CF;
color: white;
text-align: center;
outline: none;
-ms-transform: translate(-50%, -50%);
transition: all 0.3s ease 0s;
-webkit-box-shadow: 0px 20px 15px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 20px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0px 20px 15px rgba(0, 0, 0, 0.1);
}
.container {
border-radius: 100%;
font-size: 20px;
text-align: center;
background-color: #FFFFFF;
display: inline-block;
}
.nav2 {
height: 50px;
width: 100%;
margin: 0 auto;
background-color: white;
position: fixed;
z-index: 9999;
}
.nav2 > .nav-header {
display: inline;
margin: 0 auto;
z-index: 9999;
}
.nav2 > .nav-header > .nav-title {
display: inline-block;
font-size: 20px;
margin: 0 auto;
color: #fff;
font-family: 'Pacifico', cursive;
padding: 5px 10px 10px 15px;
}
#header {
display: inline-block;
font-size: 20px;
position: fixed;
margin: 0 auto;
color: #000;
z-index: 10000;
font-family: 'Pacifico', cursive;
padding: 5px 10px 10px 15px;
}
.nav2 > .nav-btn {
display: none;
margin: 0 auto;
}
.nav2 > .nav-links {
display: inline;
z-index: 9999;
margin: 0 auto;
float: right;
font-size: 15px;
}
.nav2 > .nav-links > a {
display: inline-block;
z-index: 9999;
margin: 0 auto;
text-align: center;
background-color: white;
padding: 13px 10px 13px 10px;
text-decoration: none;
color: #000;
}
.nav2 > .nav-links > a:hover {
background-color: #005DFF;
color: white;
z-index: 9999;
}
.nav2 > #nav-check {
display: none;
}
#media (max-width:600px) {
.nav2 > .nav-btn {
z-index: 9999;
display: inline-block;
position: absolute;
right: 0px;
top: 0px;
}
.nav2 > .nav-btn > label {
display: inline-block;
z-index: 9999;
background-color: white;
color: black;
width: 50px;
height: 50px;
padding: 13px;
}
.nav2 > .nav-btn > label:hover {
background-color: blue);
z-index: 9999;
}
.nav2 > .nav-btn > label > span {
display: block;
z-index: 9999;
width: 25px;
height: 10px;
border-top: 3px solid black;
}
.nav2 > .nav-links {
position: absolute;
display: block;
width: 100%;
background-color: #fff;
height: 0px;
z-index: 9999;
transition: all 0.3s ease-in;
overflow-y: hidden;
top: 50px;
left: 0px;
}
.nav2 > .nav-links > a {
display: block;
z-index: 9999;
color: black;
width: 100%;
}
.nav2> #nav-check:not(:checked) + .nav-links {
height: 0px;
z-index: 9999;
}
.nav2 > #nav-check:checked + .nav-links {
height: calc(100vh - 50px);
z-index: 9999;
overflow-y: auto;
}
}
}
.button {
position: absolute;
top: 130%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transition: all 0.3s ease 0s;
-webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
background-color: #FFFFFF;
color: black;
font-size: 16px;
padding: 32px 24px;
font-family: 'Open Sans', sans-serif;
border: none;
cursor: pointer;
border-radius: 100px;
border-color: #000000;
text-align: center;
display: flex;
text-decoration: none;
text-shadow: none;
align-items: center;
justify-content: center;
}
.button:hover {
background-color: #FFFFFF;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
color: #FF0055;
text-shadow: none;
text-decoration: none;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
body, html {
height: 100%;
margin: 0;
font-family: 'Overpass', sans-serif;
background: #ffffff;
}
p {
text-align: center;
}
h1 {
text-align: center;
padding: 100px;
font-weight: bolder;
}
h2 {
padding: 10px 10px;
font-weight: bolder;
}
h3 {
font-weight: bolder;
top: 50%;
left: -10%;
transform: translate(0%, -100%);
}
#header.active {
box-shadow: 0 0 5px rgba(0,0,0,0.3);
-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s; /* Firefox < 16 */
-ms-animation: fadein 1s; /* Internet Explorer */
-o-animation: fadein 1s; /* Opera < 12.1 */
animation: fadein 1s;
}
a:link {
position: relative;
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
}
a:link:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.nav:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.active:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
a:link {
cursor: pointer;
padding: 13px;
text-decoration: none;
}
a:link:hover {
padding: 13px;
-webkit-transition: height 0.5s ease;
-moz-transition: height 0.5s ease;
-o-transition: height 0.5s ease;
-ms-transition: height 0.5s ease;
transition: background-color 0.5s ease;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-o-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}
a:link:active {
padding: 13px;
-webkit-transition: height 0.5s ease;
-moz-transition: height 0.5s ease;
-o-transition: height 0.5s ease;
-ms-transition: height 0.5s ease;
transition: background-color 0.5s ease;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-o-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}
a:visited {
color: #000000;
}
#header.scroll {
background-color: #000000;
opacity: 0.5;
}
.main {
border-radius: 100px;
padding: 13px;
border: none!important;
text-decoration: none!important
}
.main:hover {
background-color: #00439F;
color: white;
border: none;
padding: 13px;
text-decoration: none!important;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
position: fixed;
margin: -13px -90px;
border-radius: 100px;
-webkit-animation:bounce 1s infinite;
}
</style>
<!doctype html>
<html>
<head>
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>adamferreira - Contact</title>
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">adamferreira</div>
<div id="navigation"
<ul>
<a class="main" href="portfolio.html">Portfolio</a>
<a class="nav" href="index.html">Home</a>
<a class="nav" href="contact.php">Contact</a>
<a class="nav" href="featured.html">Featured</a>
<a class="nav" href="story-highlights.html">Story Highlights</a>
</ul>
</div>
</div>
</div>
<div class="nav2">
<div class="nav-header">
<div class="nav-title"></div>
</div>
<div class="nav-btn">
<label for="nav-check">
<span></span>
<span></span>
<span></span>
</label>
</div>
<input type="checkbox" id="nav-check">
<div class="nav-links">
Portfolio
Home
Contact
Featured
Story Highlights
</div>
</div>
</head>
<body>
<div class="headerBackground"></div>
<div class="container" data-aos="ease-in-out-back" data-aos="zoom out">
<h1>Contact</h1>
<form method="POST">
<input type="text" name="firstname" placeholder="Your name..." style="font-size: 15px;">
<input type="text2" name="lastname" placeholder="Your last name..." style="font-size: 15px;">
<input type="text3" name="comment" placeholder="Type your comment..." style="font-size: 15px;">
<input type="submit" class="btn" name="submit" value="Submit">
</form>
</div>
</body>
</html>

Answer 1

Your submit button is absolutely massive due to the margin: 50px 175px;. Just the margins take up 350px. Factor in the actual width of the button (50px) and you have 400px right there.
If you set a viewport tag (width=device-width), you're looking at 375px (or so) for an iPhone 6/7/8. So, excluding any other margin/padding to the body, you're already overflowing.
Edit:
Rather than use a defined value to center/offset the button, you could change display from inline-block to block. Then margin: 50px 175px to margin: 50px auto; which will center. flexbox would also help, but requires a bit more changes to the container/children.
Here's the rendered HTML/CSS after adjusting submit to display: block; margin: 50px auto (no more horizontal scroll!):
#media screen and (max-width: 500px)
/* Mobile */
{
* {
box-sizing: border-box;
}
#navigation {
display: none;
}
input[type=text3], select, textarea {
width: 55%;
/* Full width */
padding: 30px;
/* Some padding */
margin-top: 0px;
outline: none;
color: #ff0055;
text-align: center;
border: 1px solid #f3f3f3;
/* Gray border */
border-radius: 100px;
/* Rounded borders */
}
input[type=text2], select, textarea {
width: 55%;
/* Full width */
padding: 20px;
/* Some padding */
color: #ff0055;
outline: none;
text-align: center;
border: 1px solid #f3f3f3;
/* Gray border */
border-radius: 100px;
/* Rounded borders */
}
input[type=text2]:hover, select, textarea {
width: 55%;
/* Full width */
padding: 20px;
/* Some padding */
color: #ff0055;
text-align: center;
border: 2px solid #ff0055;
/* Gray border */
border-radius: 100px;
/* Rounded borders */
transition: all 0.3s ease 0s;
}
input[type=text3]:hover, select, textarea {
width: 55%;
/* Full width */
padding: 30px;
/* Some padding */
margin-top: 0px;
color: #ff0055;
text-align: center;
border: 2px solid #ff0055;
/* Gray border */
border-radius: 100px;
/* Rounded borders */
transition: all 0.3s ease 0s;
}
input[type=text], select, textarea {
width: 55%;
/* Full width */
padding: 20px;
/* Some padding */
text-align: center;
outline: none;
color: #FF0055;
border: 1px solid #f3f3f3;
/* Gray border */
border-radius: 100px;
/* Rounded borders */
}
input[type=text]:hover, select, textarea {
width: 55%;
padding: 20px;
/* Some padding */
text-align: center;
border: 2px solid #ff0055;
/* Gray border */
border-radius: 50px;
/* Rounded borders */
transition: all 0.3s ease 0s;
}
input[type=submit] {
background-color: #001FFF;
color: white;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
border: none;
cursor: pointer;
border-color: #000000;
text-align: center;
display: block;
text-decoration: none;
text-shadow: none;
margin: 50px auto;
padding: 10px 50px;
border: none;
border-radius: 100px;
outline: none;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #0019CF;
color: white;
text-align: center;
outline: none;
-ms-transform: translate(-50%, -50%);
transition: all 0.3s ease 0s;
-webkit-box-shadow: 0px 20px 15px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 20px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0px 20px 15px rgba(0, 0, 0, 0.1);
}
.container {
border-radius: 100%;
font-size: 20px;
text-align: center;
background-color: #FFFFFF;
display: inline-block;
}
.nav2 {
height: 50px;
width: 100%;
margin: 0 auto;
background-color: white;
position: fixed;
z-index: 9999;
}
.nav2 > .nav-header {
display: inline;
margin: 0 auto;
z-index: 9999;
}
.nav2 > .nav-header > .nav-title {
display: inline-block;
font-size: 20px;
margin: 0 auto;
color: #fff;
font-family: 'Pacifico', cursive;
padding: 5px 10px 10px 15px;
}
#header {
display: inline-block;
font-size: 20px;
position: fixed;
margin: 0 auto;
color: #000;
z-index: 10000;
font-family: 'Pacifico', cursive;
padding: 5px 10px 10px 15px;
}
.nav2 > .nav-btn {
display: none;
margin: 0 auto;
}
.nav2 > .nav-links {
display: inline;
z-index: 9999;
margin: 0 auto;
float: right;
font-size: 15px;
}
.nav2 > .nav-links > a {
display: inline-block;
z-index: 9999;
margin: 0 auto;
text-align: center;
background-color: white;
padding: 13px 10px 13px 10px;
text-decoration: none;
color: #000;
}
.nav2 > .nav-links > a:hover {
background-color: #005DFF;
color: white;
z-index: 9999;
}
.nav2 > #nav-check {
display: none;
}
#media (max-width:600px) {
.nav2 > .nav-btn {
z-index: 9999;
display: inline-block;
position: absolute;
right: 0px;
top: 0px;
}
.nav2 > .nav-btn > label {
display: inline-block;
z-index: 9999;
background-color: white;
color: black;
width: 50px;
height: 50px;
padding: 13px;
}
.nav2 > .nav-btn > label:hover {
background-color: blue);
z-index: 9999;
}
.nav2 > .nav-btn > label > span {
display: block;
z-index: 9999;
width: 25px;
height: 10px;
border-top: 3px solid black;
}
.nav2 > .nav-links {
position: absolute;
display: block;
width: 100%;
background-color: #fff;
height: 0px;
z-index: 9999;
transition: all 0.3s ease-in;
overflow-y: hidden;
top: 50px;
left: 0px;
}
.nav2 > .nav-links > a {
display: block;
z-index: 9999;
color: black;
width: 100%;
}
.nav2> #nav-check:not(:checked) + .nav-links {
height: 0px;
z-index: 9999;
}
.nav2 > #nav-check:checked + .nav-links {
height: calc(100vh - 50px);
z-index: 9999;
overflow-y: auto;
}
}
}
.button {
position: absolute;
top: 130%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transition: all 0.3s ease 0s;
-webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
background-color: #FFFFFF;
color: black;
font-size: 16px;
padding: 32px 24px;
font-family: 'Open Sans', sans-serif;
border: none;
cursor: pointer;
border-radius: 100px;
border-color: #000000;
text-align: center;
display: flex;
text-decoration: none;
text-shadow: none;
align-items: center;
justify-content: center;
}
.button:hover {
background-color: #FFFFFF;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
color: #FF0055;
text-shadow: none;
text-decoration: none;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Internet Explorer */
#-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
body, html {
height: 100%;
margin: 0;
font-family: 'Overpass', sans-serif;
background: #ffffff;
}
p {
text-align: center;
}
h1 {
text-align: center;
padding: 100px;
font-weight: bolder;
}
h2 {
padding: 10px 10px;
font-weight: bolder;
}
h3 {
font-weight: bolder;
top: 50%;
left: -10%;
transform: translate(0%, -100%);
}
#header.active {
box-shadow: 0 0 5px rgba(0,0,0,0.3);
-webkit-animation: fadein 1s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s;
/* Firefox < 16 */
-ms-animation: fadein 1s;
/* Internet Explorer */
-o-animation: fadein 1s;
/* Opera < 12.1 */
animation: fadein 1s;
}
a:link {
position: relative;
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
}
a:link:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.nav:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.active:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
a:link {
cursor: pointer;
padding: 13px;
text-decoration: none;
}
a:link:hover {
padding: 13px;
-webkit-transition: height 0.5s ease;
-moz-transition: height 0.5s ease;
-o-transition: height 0.5s ease;
-ms-transition: height 0.5s ease;
transition: background-color 0.5s ease;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-o-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}
a:link:active {
padding: 13px;
-webkit-transition: height 0.5s ease;
-moz-transition: height 0.5s ease;
-o-transition: height 0.5s ease;
-ms-transition: height 0.5s ease;
transition: background-color 0.5s ease;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-o-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}
a:visited {
color: #000000;
}
#header.scroll {
background-color: #000000;
opacity: 0.5;
}
.main {
border-radius: 100px;
padding: 13px;
border: none!important;
text-decoration: none!important
}
.main:hover {
background-color: #00439F;
color: white;
border: none;
padding: 13px;
text-decoration: none!important;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
position: fixed;
margin: -13px -90px;
border-radius: 100px;
-webkit-animation:bounce 1s infinite;
}
<!doctype html>
<html>
<head>
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>adamferreira - Contact</title>
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">adamferreira</div>
<div id="navigation"
<ul>
<a class="main" href="portfolio.html">Portfolio</a>
<a class="nav" href="index.html">Home</a>
<a class="nav" href="contact.php">Contact</a>
<a class="nav" href="featured.html">Featured</a>
<a class="nav" href="story-highlights.html">Story Highlights</a>
</ul>
</div>
</div>
</div>
<div class="nav2">
<div class="nav-header">
<div class="nav-title"></div>
</div>
<div class="nav-btn">
<label for="nav-check">
<span></span>
<span></span>
<span></span>
</label>
</div>
<input type="checkbox" id="nav-check">
<div class="nav-links">
Portfolio
Home
Contact
Featured
Story Highlights
</div>
</div>
</head>
<body>
<div class="headerBackground"></div>
<div class="container" data-aos="ease-in-out-back" data-aos="zoom out">
<h1>Contact</h1>
<form method="POST">
<input type="text" name="firstname" placeholder="Your name..." style="font-size: 15px;">
<input type="text2" name="lastname" placeholder="Your last name..." style="font-size: 15px;">
<input type="text3" name="comment" placeholder="Type your comment..." style="font-size: 15px;">
<input type="submit" class="btn" name="submit" value="Submit">
</form>
</div>
</body>
</html>