How do i resize an enquiry form so that it could fit my 3 column container?-CodePudding

So, i have an enquiry form that i want to display in a 3 column flexbox layout (i'm wanting to place it in the 3rd column)but i don't quite know how to resize it to fit the area of space allocated.

My enquiry form codepen is attached as shown below: https://codepen.io/greatuser433/pen/GRxeYOz

/* Importing the Roboto font from Google Fonts. */

@import url("https://fonts.googleapis.com/css?family=Roboto:400");

/* Set font of all elements to 'Roboto' */

* {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}


/* Remove outline of all elements on focus */

*:focus {
  outline: 0;
}

body {
  background: #C32F4B;
  /* Set background color to #263238*/
}

h3 {
  text-align: center;
}


/* Add styles to 'container' class */

.container {
  padding: 12px 24px 24px 24px;
  margin: 48px 12px;
  background: #C32F4B;
  border-radius: 4px;
}


/* Add styles to 'label' selector */

label {
  font-size: 0.85em;
  margin-left: 12px;
}


/* Add styles to 'input' and 'textarea' selectors */

input[type=text],
input[type=email],
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}


/* Add styles to show 'focus' of selector */

input[type=text]:focus,
input[type=email]:focus,
textarea:focus {
  border: 1px solid green;
}


/* Add styles to the submit button */

input[type=submit] {
  background: #C32F4B;
  margin: 0 auto;
  outline: 0;
  color: white;
  border: solid 1px white;
  padding: 12px 24px;
  border-radius: 4px;
  transition: all ease-in-out 0.1s;
  position: relative;
  display: inline-block;
  text-align: center;
}


/* Add styles for 'focus' property */

input[type=submit]:focus {
  background: #A5D6A7;
  color: whitesmoke;
}


/* Style 'hover' property */

input[type=submit]:hover {
  background: #2196F3;
}


/* Align items to center of the 'div' with the class 'center' */

.center {
  text-align: center;
}


/* label color */

label {
  color: white;
}

input[type=tel],
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

<div >
  <h3 style="color:white;">Contact Form</h3>
  <form action="#" name="contact_form">
    <label for="first_name">Name</label>
    <input name="name" type="text" required placeholder="John" />
    <br>
    <label for="email">Email</label>
    <input name="email" type="email" required placeholder="[email protected]" />
    <br>
    <label for="contact_number">Contact Number</label>
    <input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901">
    <br>
    <label for="message">Message</label><br>
    <textarea name="message" cols="30" rows="10" placeholder="Enter your message here ..."></textarea>
    <div >
      <input type="submit" value="Submit">
    </div>
  </form>
</div>

Can someone help me to familiarise a bit of sizing to be able to place it into the 3 column flexbox section? (My objective is to place it in the 3rd column)

Note: I dont quite have a column set up and need a bit of help with that as well, sorry if i caused any problems...

CodePudding user response：

your problem is that you want to specifically put the top 3 inputs together but no the textarea.

You had all your elements flat all together and not seperated by divs for what you are trying to achieve here.

I did this to your code:

 <form action="#" name="contact_form">
    <div >
      <div >
    <label for="first_name">Name</label>
    <input name="name" type="text" required placeholder="John" />
    <br>
       </div>
      <div >
    <label for="email">Email</label>
    <input name="email" type="email" required placeholder="[email protected]" />
    <br>    
      </div>
      <div >
    <label for="contact_number">Contact Number</label>
    <input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901">
    <br>   
      </div>
    
    </div>
    <label for="message">Message</label><br>
    <textarea name="message" cols="30" rows="10" placeholder="Enter your message here ..."></textarea>
    <div >
      <input type="submit" value="Submit">
    </div>
  </form>

added this in css:

.display-flex {
  display: flex;
}
.display-flex .wdth {
  width: 33.3%;
  padding: 0 10px;
}

first you needed to wrap all 3 together inside 1 div, then you set that div to display: flex. then in order for each one to take up its own space, you need to wrap each label and input together in 3 seperate div tags.

With css we then apply them the width of 33.3% for them to fit and align next to each other inside.