Twitter Bootstrap Question posted in

Positioning issue with contact form (trying to centre)-Twitter bootstrap

I need help with what is the best way to fully centre the contact form in the middle of the background image no matter what view the contact form is in(desktop, tablet, mobile). I would like for there to be a smallish amount of space between the bottom and top of the contact form, however, I would like the sides of the form to be further away from the edges of the image.

I hope yous understand what I’m asking for and thanks in advance.

The contact form can be seen on the live url: http://nathan-bayne.co.uk/index1

#contact-section {
  background-color: #bce4b8; /* Previous colour that Aileen liked (#A74CAB) */
  border-bottom: 1px solid #000;
  text-align: center;
  padding: 100px 0 0;
  min-height: 800px;
  width: 100%;
} /* Adjusts section sizing, padding and text alignment */

.contact-section-content {
  margin-left: 14%;
  margin-right: 14%;
  margin-top: 2%;
}

::-webkit-input-placeholder {
  text-align: center;
}

.bg-img {
  /* The image used */
  background-image: url("https://images.pexels.com/photos/807598/pexels-photo-807598.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  min-height: 750px;
  border-radius: 35px;
  margin-top: 2%;
  margin-bottom: 3%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  border: 1px solid black;
} /* Sets background image behind contact form, sets sizing, positioning and styles the image */

.contact-section-content .container {
  max-width: 60%;
  padding: 2%;
  background-color: white;
  border-radius: 35px;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  border: 1px solid white;
  margin-top: 1%;
} /* Sets sizing, styling and positioning of the contact form container */

.container label {
  font-size: 2em;
  color: white;
} /* Sets sizing of the contact form titles */

.container textarea {
  height: 125px;
  width: 100%;
  border-radius: 35px;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
} /* Sets sizing, positioning and styling of the contact form text area */

input[type="text"] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  border-radius: 35px;
} /* Sets sizing, positioning and styling of the input tags for the contact form */

input[type="tel"] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  border-radius: 35px;
} /* Sets sizing, positioning and styling of the input tags for the contact form */

.contact-section-content button {
  font-size: 2em;
  padding: 0.6% 6%;
  border-radius: 35px;
  color: #fff;
  background-color: #339a9a;
  border: 1px solid black;
  cursor: pointer;
  text-align: center;
  /* clear: both; May not need this included */
  margin-left: 0%;
  margin-top: 1%;
} /* Styles the contact form submission button */

.contact-section-content button:hover {
  color: rgb(255, 255, 255);
  background-color: #004e4f;
  border: 2px solid white;
} /* Styles the contact form submission button when you hover over it */

.container input::-webkit-input-placeholder {
  font-size: 1.5em;
  line-height: 2;
} /* Sets sizing of the contact form input placeholders */

.container textarea::placeholder {
  font-size: 1.5em;
  line-height: 2;
} /* Sets sizing of the contact form textarea placeholders */

@media only screen and (max-width: 1606px) {
  .contact-section-content {
    margin-left: 2.5%;
    margin-right: 2.5%;
    margin-bottom: 6%;
  }

  ::-webkit-input-placeholder {
    text-align: center;
  }

  .bg-img {
    /* The image used */
    background-image: url("https://images.pexels.com/photos/807598/pexels-photo-807598.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    min-height: 750px;
    border-radius: 35px;
    margin-top: 2%;
    margin-bottom: 3%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  } /* Sets background image behind contact form, sets sizing, positioning and styles the image */

  .contact-section-content .container {
    max-width: 70%;
    padding: 2%;
    background-color: white;
    border-radius: 35px;
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    border: 1px solid white;
    margin-top: 1.5%;
  } /* Sets sizing, styling and positioning of the contact form container */

  .container label {
    font-size: 2em;
    color: white;
  } /* Sets sizing of the contact form titles */

  .container textarea {
    height: 125px;
    width: 100%;
    border-radius: 35px;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
  } /* Sets sizing, positioning and styling of the contact form text area */

  input[type="text"] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
    border-radius: 35px;
  } /* Sets sizing, positioning and styling of the input tags for the contact form */

  input[type="tel"] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
    border-radius: 35px;
  } /* Sets sizing, positioning and styling of the input tags for the contact form */

  .contact-section-content button {
    padding: 1% 8%;
    font-size: 1.8em;
  } /* Styles the contact form submission button */
}

@media only screen and (max-width: 815px) {
 
  .contact-section-content {
    margin-left: 2.5%;
    margin-right: 2.5%;
    margin-top: 10%;
    margin-bottom: 15%;
  }

  ::-webkit-input-placeholder {
    text-align: center;
  }

  .bg-img {
    /* The image used */
    background-image: url("https://images.pexels.com/photos/807598/pexels-photo-807598.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    min-height: 670px;
    border-radius: 35px;
    margin-top: 2%;
    margin-bottom: 3%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  } /* Sets background image behind contact form, sets sizing, positioning and styles the image */

  .bg-img form {
    margin-bottom: 7.5%;
  } /* Sets background image behind contact form, sets sizing, positioning and styles the image */

  .contact-section-content .container {
    max-width: 85%;
    padding: 2%;
    background-color: white;
    border-radius: 35px;
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    border: 1px solid white;
    margin-top: 1.5%;
  } /* Sets sizing, styling and positioning of the contact form container */

  .container label {
    font-size: 2em;
    color: white;
  } /* Sets sizing of the contact form titles */

  .container textarea {
    height: 125px;
    width: 100%;
    border-radius: 35px;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
  } /* Sets sizing, positioning and styling of the contact form text area */

  input[type="text"] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
    border-radius: 35px;
  } /* Sets sizing, positioning and styling of the input tags for the contact form */

  input[type="tel"] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
    border-radius: 35px;
  } /* Sets sizing, positioning and styling of the input tags for the contact form */

  .contact-section-content button {
    padding: 1% 8%;
    font-size: 2em;
    margin-bottom: 4%;
  } /* Styles the contact form submission button */

  .container input::-webkit-input-placeholder {
    font-size: 1.5em;
    line-height: 2;
  } /* Sets sizing of the contact form input placeholders */

  .container textarea::placeholder {
    font-size: 1.5em;
    line-height: 2;
  } /* Sets sizing of the contact form textarea placeholders */
}
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' media="screen" />

<section id="contact-section">
      <div class="contact-section-content">
      <div class="bg-img"><br><br>
        <form action="/action_page.php" class="container">

          <label for="psw"><b>Name</b></label>
          <input type="text" placeholder="Enter Name" name="psw" required>
      
          <label for="email"><b>Email</b></label>
          <input type="text" placeholder="Enter Email" name="email" required>

          <label for="number"><b>Mobile Number</b></label>
          <input type="tel" name="contact_number" placeholder="Mobile Number" pattern="[0-9]{11}"/>
      
          <label for="psw"><b>Contact Summary</b></label>
          <textarea name="subject" placeholder="Write a short summary about what you're in need of help with.." required></textarea>
      
          <button type="submit">Submit Form</button>

        </form>
      </div>
      </div>
Tags:

2

Answers


  1. 0

    Try to add this to your .bg-image class

    .bg-img {
  background-image: url("https://images.pexels.com/photos/807598/pexels-photo-807598.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  min-height: 750px;
  border-radius: 35px;
  margin-top: 2%;
  margin-bottom: 3%;
  display : flex ; 
  flex-direction : row;
  align-items : center; 
  justify-content: center;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  border: 1px solid black;
}

    what I added is display:flex and justify-content/align-items : center to center any element inside that container

    Login or Signup to reply.
  2. 0

    Just add this to.bg-img :

    display: flex; align-items: center;

    And set margin-top: 0 for .container

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search