Monday

How to position the form that is in the centre at the top?

Issue

My intention is to put the <form> just a little bit under the <nav>, so I want to position it at the top. It is already in the center. I want to make it responsive, so for example when I go into mobile mode then the form should be in the center, but also at the top, just under the <nav>. I have already tried several ways to do it, but none of them worked. Here is my code:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'poppins', sans-serif;
}

nav {
  height: 80px;
  width: 100%;
  background-color: #2b2d2e;
  background-image: linear-gradient(62deg, #46484a 0%, #2e2e30 100%);
}

nav i {
  color: #d35858;
  cursor: pointer;
  font-size: 40px;
  padding-top: 20px;
  padding-right: 20px;
  float: right;
}

.container {
  width: 100%;
  height: 100vh;
  background: #343131;
  display: grid;
  place-items: center;
}

.container form textarea {
  resize: none;
}

.container form {
  background: rgb(82, 81, 81);
  display: flex;
  flex-direction: column;
  padding: 2vw 4vw;
  width: 90%;
  max-width: 600px;
  border-radius: 10px;
}

form h3 {
  color: rgb(213, 118, 118);
  font-weight: 800;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
}

form input,
form textarea {
  border: 0;
  margin: 10px 0;
  padding: 20px;
  outline: none;
  background: #d9cece;
  font-size: 16px;
}

form button {
  padding: 15px;
  color: #fff;
  background: rgb(221, 107, 107);
  font-size: 18px;
  border: 0;
  outline: none;
  cursor: pointer;
  width: 150px;
  margin: 20px auto 0;
  border-radius: 30px;
}

form button:hover {
  background: rgb(236, 240, 239);
  transition: 0.75s;
}

.nav-link {
  height: 100vh;
  position: fixed;
  width: 100%;
  display: grid;
  place-items: center;
  background-color: rgb(42, 43, 43);
  left: -100%;
  transition: 0.5s;
}

.nav-link a {
  text-decoration: none;
  color: #fff;
  font-size: 30px;
  display: block;
  text-align: center;
  font-weight: bold;
  padding: -100px;
}

a:hover,
a.active {
  transition: .5s;
  color: rgb(239, 122, 122);
}

.nav-link ul li {
  padding: 18px;
}

.nav-link ul {
  list-style: none;
  margin-top: -50vh;
}

.nav-bar-top ul {
  padding-top: 32px;
  float: right;
  padding-right: 80px;
}

.nav-bar-top ul li {
  display: inline-block;
  padding-left: 15px;
}

.nav-bar-top ul li a {
  color: #d5c9c9;
  text-decoration: none;
}

.nav-bar-top ul li a.active {
  color: #fa9e9e;
}

.nav-bar-top ul li a:hover {
  color: #d35858;
}

@media(min-width: 800px) {
  #nav-bar-icon {
    display: none;
  }
}

@media(max-width: 800px) {
  .nav-bar-top ul {
    display: none;
  }
}

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Page</title>
  <link rel="stylesheet" href="../css/contact.css">
  <script src="https://kit.fontawesome.com/f2665b7baf.js" crossorigin="anonymous"></script>
</head>

<body>
  <nav>
    <label id="nav-bar-icon">
            <i class="fa-solid fa-bars"></i>
        </label>
    <div class="nav-bar-top">
      <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="#">ABOUT US</a></li>
        <li><a class="active" href="#">CONTACT</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">FEEDBACK</a></li>
      </ul>
    </div>

  </nav>

  <div class="nav-link">
    <ul>
      <li><a href="index.html">HOME</a></li>
      <li><a href="#">ABOUT US</a></li>
      <li><a class="active" href="#">CONTACT</a></li>
      <li><a href="#">SERVICES</a></li>
      <li><a href="#">FEEDBACK</a></li>
    </ul>
  </div>

  <div class="container">

    <form action="https://formsubmit.co/c2dd7f214ec3e502a5410ae72d612526" method="POST">
      <h3>Contact us! </h3>
      <!--                 hint for the content of input /  required to give input-->
      <input class="input_text" type="text" name="name" tabindex="1" placeholder="Your Name" required>
      <br>
      <input class="input_text" type="email" name="email" tabindex="2" placeholder="Your Email" required>
      <br>
      <textarea class="input_text" name="message" tabindex="3" placeholder="Your question" required></textarea>
      <br>
      <button type="submit">Send</button>
      <input type="hidden" name="_captcha" value="false">
      <input type="hidden" name="_next" value="http://127.0.0.1:5500/html/thanks.html">


    </form>


  </div>
  <script src="../js/index.js"></script>


</body>

Solution

On your container class, change the following CSS styles:

display: grid;
place-items: center;

display: flex;
justify-content: center;

And it should work.

From your description, I assume that you don't want the form to stretch to the bottom of the screen, so remove height: 100vh from this container and, for example, apply your background color to the body:

body {
  background: #343131;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'poppins', sans-serif;
}

body {
  background: #343131;
}

nav {
  height: 80px;
  width: 100%;
  background-color: #2b2d2e;
  background-image: linear-gradient(62deg, #46484a 0%, #2e2e30 100%);
}

nav i {
  color: #d35858;
  cursor: pointer;
  font-size: 40px;
  padding-top: 20px;
  padding-right: 20px;
  float: right;
}

.container {
  width: 100%;
  background: #343131;
  display: flex;
  justify-content: center;
}

.container form textarea {
  resize: none;
}

.container form {
  background: rgb(82, 81, 81);
  display: flex;
  flex-direction: column;
  padding: 2vw 4vw;
  width: 90%;
  max-width: 600px;
  border-radius: 10px;
}

form h3 {
  color: rgb(213, 118, 118);
  font-weight: 800;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
}

form input,
form textarea {
  border: 0;
  margin: 10px 0;
  padding: 20px;
  outline: none;
  background: #d9cece;
  font-size: 16px;
}

form button {
  padding: 15px;
  color: #fff;
  background: rgb(221, 107, 107);
  font-size: 18px;
  border: 0;
  outline: none;
  cursor: pointer;
  width: 150px;
  margin: 20px auto 0;
  border-radius: 30px;
}

form button:hover {
  background: rgb(236, 240, 239);
  transition: 0.75s;
}

.nav-link {
  height: 100vh;
  position: fixed;
  width: 100%;
  display: grid;
  place-items: center;
  background-color: rgb(42, 43, 43);
  left: -100%;
  transition: 0.5s;
}

.nav-link a {
  text-decoration: none;
  color: #fff;
  font-size: 30px;
  display: block;
  text-align: center;
  font-weight: bold;
  padding: -100px;
}

a:hover,
a.active {
  transition: .5s;
  color: rgb(239, 122, 122);
}

.nav-link ul li {
  padding: 18px;
}

.nav-link ul {
  list-style: none;
  margin-top: -50vh;
}

.nav-bar-top ul {
  padding-top: 32px;
  float: right;
  padding-right: 80px;
}

.nav-bar-top ul li {
  display: inline-block;
  padding-left: 15px;
}

.nav-bar-top ul li a {
  color: #d5c9c9;
  text-decoration: none;
}

.nav-bar-top ul li a.active {
  color: #fa9e9e;
}

.nav-bar-top ul li a:hover {
  color: #d35858;
}

@media(min-width: 800px) {
  #nav-bar-icon {
    display: none;
  }
}

@media(max-width: 800px) {
  .nav-bar-top ul {
    display: none;
  }
}

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Page</title>
  <link rel="stylesheet" href="../css/contact.css">
  <script src="https://kit.fontawesome.com/f2665b7baf.js" crossorigin="anonymous"></script>
</head>

<body>
  <nav>
    <label id="nav-bar-icon">
            <i class="fa-solid fa-bars"></i>
        </label>
    <div class="nav-bar-top">
      <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="#">ABOUT US</a></li>
        <li><a class="active" href="#">CONTACT</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">FEEDBACK</a></li>
      </ul>
    </div>

  </nav>

  <div class="nav-link">
    <ul>
      <li><a href="index.html">HOME</a></li>
      <li><a href="#">ABOUT US</a></li>
      <li><a class="active" href="#">CONTACT</a></li>
      <li><a href="#">SERVICES</a></li>
      <li><a href="#">FEEDBACK</a></li>
    </ul>
  </div>

  <div class="container">

    <form action="https://formsubmit.co/c2dd7f214ec3e502a5410ae72d612526" method="POST">
      <h3>Contact us! </h3>
      <!--                 hint for the content of input /  required to give input-->
      <input class="input_text" type="text" name="name" tabindex="1" placeholder="Your Name" required>
      <br>
      <input class="input_text" type="email" name="email" tabindex="2" placeholder="Your Email" required>
      <br>
      <textarea class="input_text" name="message" tabindex="3" placeholder="Your question" required></textarea>
      <br>
      <button type="submit">Send</button>
      <input type="hidden" name="_captcha" value="false">
      <input type="hidden" name="_next" value="http://127.0.0.1:5500/html/thanks.html">


    </form>


  </div>
  <script src="../js/index.js"></script>


</body>

Answered By - PeterJames

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Monday

How to position the form that is in the centre at the top?

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels