How would I keep this forms contents from leaving the frame? - html

Question

I made this simple css design for my web form, and the problem is that on mobile or any small screen the input and the captcha escape from the frame yet the submit button is just fine... I don't know how to fix this and I have little experience in css.
Here's what it looks like on mobile:
and here's my code:
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
background: white;
}
form,
.dis {
width: 30%;
margin: 10px auto;
padding: 20px;
border: 3px solid #333333;
background: white;
border-radius: 5px 5px 10px 10px;
text-align: center;
}
input {
color: black;
padding: 5px;
width: auto;
border: 2px solid black;
border-radius: 10px 10px 10px 10px;
text-align: center;
background: white;
}
h2 {
width: 20%;
margin: 10px auto;
padding: 15px;
border: 2px solid red;
font-size: 75%;
color: red;
text-align: center;
}
<form id="dis" method="post">
<input name="username" type="username" placeholder="What's your Discord tag?" size="40"><br><br>
<input type="submit" name="submit" value="Submit"><br><br>
<center>
<div class="g-recaptcha" data-sitekey="6LfVs6sUAAAAAHi-Pm9QAKHNk_QskSE_-8F5zBrV"></div>
</center>
</form>

Answer 1

You can reset the value of your size attribute , or set a width to your input text. size="30" seems fine here , but to avoid side effects from font-size or family, i would advise to set also a max-width in your css.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text#size
The size attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
background: white;
}
form,
.dis {
width: 30%;
margin: 10px auto;
padding: 20px;
border: 3px solid #333333;
background: white;
border-radius: 5px 5px 10px 10px;
text-align: center;
}
input {
color: black;
padding: 5px;
width: auto;
border: 2px solid black;
border-radius: 10px 10px 10px 10px;
text-align: center;
background: white;
max-width:90%;
}
h2 {
width: 20%;
margin: 10px auto;
padding: 15px;
border: 2px solid red;
font-size: 75%;
color: red;
text-align: center;
}
<form id="dis" method="post">
<input name="username" type="username" placeholder="What's your Discord tag?" size="30"><br><br>
<input type="submit" name="submit" value="Submit"><br><br>
<center>
<div class="g-recaptcha" data-sitekey="6LfVs6sUAAAAAHi-Pm9QAKHNk_QskSE_-8F5zBrV"></div>
</center>
</form>

Answer 2

The stylish rule you are missing on your css input is the max-width property :
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
background: white;
}
form,
.dis {
width: 30%;
margin: 10px auto;
padding: 20px;
border: 3px solid #333333;
background: white;
border-radius: 5px 5px 10px 10px;
text-align: center;
}
input {
color: black;
padding: 5px;
width: auto;
max-width: 95%;
border: 2px solid black;
border-radius: 10px 10px 10px 10px;
text-align: center;
background: white;
}
h2 {
width: 20%;
margin: 10px auto;
padding: 15px;
border: 2px solid red;
font-size: 75%;
color: red;
text-align: center;
}
<form id="dis" method="post">
<input name="username" type="username" placeholder="What's your Discord tag?" size="30"><br><br>
<input type="submit" name="submit" value="Submit"><br><br>
<center>
<div class="g-recaptcha" data-sitekey="6LfVs6sUAAAAAHi-Pm9QAKHNk_QskSE_-8F5zBrV"></div>
</center>
</form>

Answer 3

Try to use this, all I have done just adding box-sizing: border-box and width: 100% into input
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-size: 120%;
background: white;
}
#media only screen and (max-width: 999px) {
form,
.dis {
width: 30%;
margin: 10px auto;
padding: 20px;
border: 3px solid #333333;
background: white;
border-radius: 5px 5px 10px 10px;
text-align: center;
}
}
#media only screen and (min-width: 1000px) {
form,
.dis {
width: 300px;
margin: 10px auto;
padding: 20px;
border: 3px solid #333333;
background: white;
border-radius: 5px 5px 10px 10px;
text-align: center;
}
}
input {
color: black;
padding: 5px;
width: 100%;
border: 2px solid black;
border-radius: 10px 10px 10px 10px;
text-align: center;
background: white;
}
h2 {
width: 20%;
margin: 10px auto;
padding: 15px;
border: 2px solid red;
font-size: 75%;
color: red;
text-align: center;
}
<form id="dis" method="post">
<input name="username" type="username" placeholder="What's your Discord tag?" size="40"><br><br>
<input type="submit" name="submit" value="Submit"><br><br>
<center>
<div class="g-recaptcha" data-sitekey="6LfVs6sUAAAAAHi-Pm9QAKHNk_QskSE_-8F5zBrV"></div>
</center>
</form>