I'm trying to make a contact form. I want the message text input box height to stretch to fill up the space between the label above it and the the button below it at the very bottom of the form. I'm thinking I could use CSS Grid to properly align everything, but I'm not sure what the best approach would be to make the form responsive.
My code:
.contact-section-container {
background: #2A6CCF;
border-radius: 20px;
font-family: sans-serif;
font-size: clamp(1rem, 1.042vw, 1.25rem);
color: white;
width: clamp(30rem, 41.98vw, 50.375rem);
height: clamp(30rem, 38.28125vw, 45.9375rem);
padding: 1.5625rem 3.125rem 1.5625rem 3.125rem;
}
.contact-section-container h2 {
font-size: 1.875rem;
color: white;
display:flex;
justify-content:center;
margin-bottom: .833em;
}
.contact-section-container div label {
display: block;
margin-bottom: .5em;
}
.contact-section-container div:nth-of-type(n 2) label{
margin-top: .75em;
}
.contact-section-container div input {
background: #F2F2F2;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
border-radius: 10px;
height: 2rem;
width: 100%;
}
.contact-section-container button {
background: #DFE16C;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
color: black;
font-size: 1.25rem;
font-weight: 600;
width: 10em;
height: 2.5em;
}<form class="contact-section-container">
<h2>Contact Form</h2>
<div class="contact-form-input-container">
<div>
<label for="contact-page-name-input">Name*</label>
<input id="contact-page-name-input" type="text"/>
</div>
<div>
<label for="contact-page-email-input">Email*</label>
<input id="contact-page-email-input" type="email"/>
</div>
<div>
<label for="contact-page-message-input">Message*</label>
<input id="contact-page-message-input" type="text"/>
</div>
<button type="submit">Submit</button>
</div>
</form>CodePudding user response：
For the message , you should use a textarea instead an input.
For the layout, nowdays the grid-layout is really a powerfull and easy thing to use. the fr unit is really such an handy way to dispatch areas for rows or columns.
Possible example :
.contact-section-container {
background: #2A6CCF;
border-radius: 20px;
font-family: sans-serif;
font-size: clamp(1rem, 1.042vw, 1.25rem);
color: white;
width: clamp(30rem, 41.98vw, 50.375rem);
height: clamp(30rem, 38.28125vw, 45.9375rem);
padding: 1.5625rem 3.125rem 1.5625rem 3.125rem;
display:grid;
grid-template-rows: auto 1fr auto;
}
.contact-form-input-container {
display:grid;
grid-template-rows: auto auto 1fr
}
.contact-form-input-container div:last-of-type {
display:grid;
grid-template-rows:auto 1fr;
}
.contact-section-container h2 {
font-size: 1.875rem;
color: white;
display: flex;
justify-content: center;
margin-bottom: .833em;
}
.contact-section-container div label {
display: block;
margin-bottom: .5em;
}
.contact-section-container div:nth-of-type(n 2) label {
margin-top: .75em;
}
.contact-section-container div input,
.contact-section-container div textarea {
background: #F2F2F2;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
border-radius: 10px;
height: 2rem;
width: 100%;
}
.contact-section-container div textarea {
height: auto;
resize:none; /* because your layout does not allow it */
}
.contact-section-container button {
background: #DFE16C;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
color: black;
font-size: 1.25rem;
font-weight: 600;
width: 10em;
height: 2.5em;
margin:1rem auto 0;
}<form class="contact-section-container">
<h2>Contact Form</h2>
<div class="contact-form-input-container">
<div>
<label for="contact-page-name-input">Name*</label>
<input id="contact-page-name-input" type="text" />
</div>
<div>
<label for="contact-page-email-input">Email*</label>
<input id="contact-page-email-input" type="email" />
</div>
<div>
<label for="contact-page-message-input">Message*</label>
<textarea row="15" id="contact-page-message-input"></textarea>
</div>
<button type="submit">Submit</button>
</div>
</form>CodePudding user response：
From what I got from your question this is the result you were looking for. You can style the ID #contact-page-message-input and give it a height to adjust that text box. Then I went ahead and centered your button using a flex display.
I also adjusted your .contact-section-container width from 30rem to 32rem to support these changes. I would suggest not using a clamp on your height if you're looking for a fully responsive layout.
.contact-section-container {
background: #2A6CCF;
border-radius: 20px;
font-family: sans-serif;
font-size: clamp(1rem, 1.042vw, 1.25rem);
color: white;
width: clamp(30rem, 41.98vw, 50.375rem);
height: clamp(32rem, 38.28125vw, 34.9375rem);
padding: 1.5625rem 3.125rem 1.5625rem 3.125rem;
}
.contact-section-container h2 {
font-size: 1.875rem;
color: white;
display:flex;
justify-content:center;
margin-bottom: .833em;
}
.contact-section-container div label {
display: block;
margin-bottom: .5em;
}
.contact-section-container div:nth-of-type(n 2) label{
margin-top: .75em;
}
.contact-section-container div input {
background: #F2F2F2;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
border-radius: 10px;
height: 2rem;
width: 100%;
}
.contact-section-container button {
background: #DFE16C;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
color: black;
font-size: 1.25rem;
font-weight: 600;
width: 10em;
height: 2.5em;
}
/* additions */
#contact-page-message-input {
height: 200px;
}
@media only screen and (max-width: 600px) {
.contact-section-container {
width: auto;
}
}
textarea {
height: auto;
width: 100%; /* 100% of container */
}<form class="contact-section-container">
<h2>Contact Form</h2>
<div class="contact-form-input-container">
<div>
<label for="contact-page-name-input">Name*</label>
<input id="contact-page-name-input" type="text"/>
</div>
<div>
<label for="contact-page-email-input">Email*</label>
<input id="contact-page-email-input" type="email"/>
</div>
<div>
<label for="contact-page-message-input">Message*</label>
<textarea row="15" id="contact-page-message-input"></textarea>
</div>
<button type="submit" class="btn">Submit</button>
</div>
</form>