How do I fix my form to be visible at all times?

Question

I have been trying different positions and changing the units needed for the height and width, in order to position my form to be always in the centre. Unfortunately, most of the times my input elements move to the left whilst the text stays aligned in the center. Also I want my form to be fully visible on different resolutions and the button for changing the language to be always positioned in the same spot(top left or right). If you have any recommendations, I will be really thankful to hear what you think.

body {
    height: 100%;
    width: 100%;
    padding: 0;
    background-color: #8102f7;
    margin: 0;
    font-family: sans-serif;
} 

.login-form {
    display: inline-block;
    width: 600px;
    height: auto;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); 
}

p {
    color: #fff;
    font-size: 200%;
    letter-spacing: 3px;
    text-align: center;
    

}

.user {
    background-color: transparent;
    border: none;
    border-bottom: 3px solid #fff;
    outline: none;
    padding-bottom: 0px;
    text-align: center;
    color: #fff;
    font-weight: 100;
    font-size: 200%;
    letter-spacing: 3px;
    width: 600px;
}

.botName {

  background-color: transparent;
  border: none;
  border-bottom: 3px solid #fff;
  outline: none;
  padding-bottom: 0px;
  text-align: center;
  width: 600px;
  color: #fff;
  font-weight: 100;
  font-size: 200%;
  letter-spacing: 3px;
  
}

.changeLang {
    position: fixed;
    background-color: transparent;
    color: white;
    border: none;
    height: 50px;
    font-size: 150%;
    letter-spacing: 3px;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hello!</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="/styleMisho.css" />
  
    
</head>
<body>
  <button class="changeLang" id="changeLang">Tiếng Việt</button>
  
  <div class="login-form">
    <form method="POST">
      <p>What is your name?</p>
      <input type="text" class="user" placeholder="">
      <p>What is your bot's name?</p>
      <input type="text" class="botName" placeholder="">
      </form>
  </div>


    



  <script src="jsonAndButton.js"> </script>
</body>
</html>

score 0 · Answer 1 · answered Jul 16 '21 at 19:56

Just add font-size: 62.5%; to body styles. (Read this to know why 62.5% is used)

body {
  height: 100%;
  width: 100%;
  padding: 0;
  background-color: #8102f7;
  margin: 0;
  font-family: sans-serif;
  font-size: 62.5%;
}

.login-form {
  display: inline-block;
  width: 600px;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

p {
  color: #fff;
  font-size: 200%;
  letter-spacing: 3px;
  text-align: center;
}

.user {
  background-color: transparent;
  border: none;
  border-bottom: 3px solid #fff;
  outline: none;
  padding-bottom: 0px;
  text-align: center;
  color: #fff;
  font-weight: 100;
  font-size: 200%;
  letter-spacing: 3px;
  width: 600px;
}

.botName {
  background-color: transparent;
  border: none;
  border-bottom: 3px solid #fff;
  outline: none;
  padding-bottom: 0px;
  text-align: center;
  width: 600px;
  color: #fff;
  font-weight: 100;
  font-size: 200%;
  letter-spacing: 3px;
}

.changeLang {
  position: fixed;
  background-color: transparent;
  color: white;
  border: none;
  height: 50px;
  font-size: 150%;
  letter-spacing: 3px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Hello!</title>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <link rel="stylesheet" href="/styleMisho.css" />


</head>

<body>
  <button class="changeLang" id="changeLang">Tiếng Việt</button>

  <div class="login-form">
    <form method="POST">
      <p>What is your name?</p>
      <input type="text" class="user" placeholder="">
      <p>What is your bot's name?</p>
      <input type="text" class="botName" placeholder="">
    </form>
  </div>






  <script src="jsonAndButton.js">
  </script>
</body>

</html>

You can proceed with using `rem` unit instead of `px` or percentages on your elements. — Sana Mumtaz, Jul 16 '21 at 19:59

How do I fix my form to be visible at all times?

1 Answers1