Веб-страница не отвечает даже при использовании Bootstrap и не использует px - PullRequest
Новая
       24

Веб-страница не отвечает даже при использовании Bootstrap и не использует px

0 голосов
/ 21 октября 2018

Я понимаю, что этот вопрос задавался бесчисленное количество раз, однако я до сих пор не нашел рабочего ответа!

Вот сайт в моем разрешении (1440 x 900):

Website in question on 1440x900 resolution.

Ивот сайт с разрешения друга (1920 x 1080):

https://gyazo.com/7bbdd9dd9119059f1ca65c034560abc6

Кажется, я не понимаю, почему это происходит!Я буквально все перепробовал.Я пробовал vw и vh, проценты, а также материал для начальной загрузки, но безрезультатно.

HTML-код: 

  <div class="form-control" style="background-color: transparent;border-style: none;">
<form class="loginform" action="loginprocess.php" method="post">
  <div class="form-group">
    <label class="labels" for="uname">Username</label>
    <input class="usernameinput" type="text" name="username" id="uname">
  </div>
  <div class="form-group">
    <label class="labels" for="pwd">Password</label>
    <input class="passwordinput" type="password" name="password" id="pwd">
  </div>
  <div class="form-group">
    <input type="image" class="loginbutton" src="assets/img/login.png" onclick="PlaySound()">
  </div>
</form>

код CSS 

.backbutton {

position:relative;
left:1%;
top:1%;
width:2%;
height:4%;
opacity:0.5;

}

.loginform {

position:relative;
left: 40vw;
top:33vh;
width:25vw;


}

input[type=text] {

width: 28.7vw;

}

input[type=password] {

width: 28.7vw;

}

.loginbutton {

position:relative;
left:19.25vw;
top:1vh;
max-width: 40%;
height: 35%;

}

.labels {

color:white;
position:relative;
left: -11vw;
top: 6vh;
font-family: 'Chakra Petch', sans-serif;
font-size: 200%;

}

Большое спасибо за чтение!Я надеюсь, что кто-то может помочь мне с этим:)

1 Ответ

0 голосов
/ 21 октября 2018

Если вы хотите, чтобы форма входа оставалась посередине, как по вертикали, так и по горизонтали для любого экрана.

Вы можете окружить form контейнером и применить 

  display: flex;
  position: fixed;
  overflow: auto;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

Вот фрагмент, хотя, если вы используете Bootstrap, вы можете посмотреть, как они используют jumbotron, как показано здесь jumbotron 

body {
  margin: 0;
}

main {
  display: flex;
  position: fixed;
  overflow: auto;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: blue !important;
}

form {
  background: rgba(0, 0, 0, 0.8);
  padding: 2em;
  border-radius: 10px;
  margin: 0 auto;
}

.form-group {
  display: flex;
  margin-top: 20px;
}

.form-group:first-child {
  margin-top: 0px;
}

label {
  color: #ffffff;
  margin-right: 10px;
  min-width: 90px;
}

input {
  width: 100%;
}

input[type=image] {
  height: 30px;
  width: auto;
}
<body>
  <main>
    <form class="loginform" method="post">
      <div class="form-group">
        <label for="uname">Username</label>
        <input type="text" name="username" id="uname">
      </div>
      <div class="form-group">
        <label for="pwd">Password</label>
        <input type="password" name="password" id="pwd">
      </div>
      <div class="form-group">
        <input type="image" src="https://www.freeiconspng.com/uploads/login-button-png-13.png">
      </div>
    </form>
  </main>
</body>
...