Как бы я сделал этот div отзывчивым

Question

Прежде всего, я хотел бы сказать, что я ужасен в проектировании и использовании CSS, поэтому мне было интересно, смогу ли я получить некоторую помощь, чтобы сделать мой div отзывчивым.В настоящее время он находится в центре экрана, который работает, однако, он все сжимается (по ширине и по высоте) при использовании на разных экранах.Текст также не меняется.Даже когда он используется на мониторе 1080p, на нем есть полосы прокрутки, поэтому я действительно застрял в том, как его стилизовать.Я вставил HTML и CSS ниже.

<div id="mainForm">
        <form id="userForm" method="post">
            <p id="userP">Username: <br>
                <input id="Username" type="text" name="Username" placeholder="Username" onfocus="this.placeholder='';" onblur="this.placeholder='Username';">

            <p id="passP">Password: <br>
                <input id="Password" type="password" name="Password" placeholder="Password" onfocus="this.placeholder='';" onblur="this.placeholder='Password';">

            <p id="emailP">Email: <br>
                <input id="Email" type="text" name="Email" placeholder="Email Address" onfocus="this.placeholder='';" onblur="this.placeholder='Email Address';">

            <p id="authP">Auth Code: <br>
                <input id="auth2" type="text" name="Auth" placeholder="Auth Code" onfocus="this.placeholder='';" onblur="this.placeholder='Auth Code';"><br>

            <input type="submit" id="submit" name="submit" value="Login"/>

            <h4>Don't have an account? <a href="register.php" >Register!</a></h4>
        </form>
    </div>

CSS для основного DIV:

#mainForm{
width: 20vw;
height: 40vh;
background-color: white;
margin:auto;
font-family: Montserrat;
text-align: center;
align-items: center;
margin-top: 2%;
position: absolute;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

CSS для элементов формы:

#Username, #Password, #Email, #Auth, #auth2 {
border: none; border-bottom: 2px solid;
padding: 0.5%;
margin-left: 1%;
width:40%;
transition: width 1s;
-webkit-transition: width 0.8s;
text-align: center;
font-size: 16px;
}

#Username:focus, #Password:focus, #Email:focus, #auth2:focus {
    width: 60%;
}

 #userP, #passP, #emailP, #authP{
    font-size: 20px;
}
#userP{
    margin-top:15%;
}

Спасибо.

Answer 1

Возможно, вы захотите просто использовать пикселей вместо vw и vh с таким небольшим окном для работы.Я бы предложил высоту и ширину из 300px (я проверил, и с контентом все в порядке.)

Как заметил @Friday Ameh, обычно выхотел бы работать с медиа-запросами , но в этом случае размер ширины не собирается покидать экран, потому что самый маленький размер экрана (мобильный) обычно составляет около 350px в любом случае.

Возможно, вы захотите использовать media-query для больших экранов, чтобы он не оставался таким маленьким, как 300px, но это зависит от вас и зависит от вашего дизайна.

Могу ли я вам чем-нибудь помочь?

Answer 2

нужно добавить высоту в пикселях

#mainForm {
	width: 320px;
	height: 340px;
	background-color: white;
	font-family: Montserrat;
	text-align: center;
	align-items: center;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}
#Username, #Password, #Email, #Auth, #auth2 {
	border: none; border-bottom: 2px solid;
	padding: 0.5%;
	margin-left: 1%;
	width:40%;
	transition: width 1s;
	-webkit-transition: width 0.8s;
	text-align: center;
	font-size: 16px;
}

#Username:focus, #Password:focus, #Email:focus, #auth2:focus {
	width: 60%;
}

#userP, #passP, #emailP, #authP{
	font-size: 20px;
}
#userP{
	margin-top:15%;
}

	<div id="mainForm">
		<form id="userForm" method="post">
			<p id="userP">Username: <br>
				<input id="Username" type="text" name="Username" placeholder="Username" onfocus="this.placeholder='';" onblur="this.placeholder='Username';">

				<p id="passP">Password: <br>
					<input id="Password" type="password" name="Password" placeholder="Password" onfocus="this.placeholder='';" onblur="this.placeholder='Password';">

					<p id="emailP">Email: <br>
						<input id="Email" type="text" name="Email" placeholder="Email Address" onfocus="this.placeholder='';" onblur="this.placeholder='Email Address';">

						<p id="authP">Auth Code: <br>
							<input id="auth2" type="text" name="Auth" placeholder="Auth Code" onfocus="this.placeholder='';" onblur="this.placeholder='Auth Code';"><br>

							<input type="submit" id="submit" name="submit" value="Login"/>

							<h4>Don't have an account? <a href="register.php" >Register!</a></h4>
						</form>
					</div>
		

Answer 3

прежде всего установите мета-тег viewport в вашей голове HTML

<meta name="viewport" content="width=device-width, initial-scale=1">

во-вторых, используйте загрузочный фреймворк, который полностью отзывчив, а затем заключите ваш div в столбцы

<div class="container">
  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <!-- your form goes here -->
    </div>
  </div>
</div>

внутри <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> вы можете добавить больше классов и изменить их свойства CSS, такие как max-width, min-width, margin-top и т. Д.