I've been digging into this for days and have tried all the fixes I could find on Stack Overflow that I'll detail below. Only the left side of the submit button is able to be clicked at the bottom of a form. Some of this is still placeholder, but these two areas should be fully functioning now. The textarea I was able to mostly fix with display: block or display: inline-block, but it still doesn't let you click the very top of the textarea along the whole width. Thanks in advance!
form#contact textarea {
width: 100%;
min-width: 100%;
max-width: 100%;
max-height: 200px;
min-height: 200px;
height: 200px;
border-radius: 23px;
background-color: transparent;
border: 1px solid #eee;
outline: none;
font-size: 15px;
font-weight: 300;
color: #2a2a2a;
padding: 15px 20px;
margin-top: 30px;
display: inline-block;
}
form#contact button {
display: inline-block;
background-color: #fff;
font-size: 15px;
font-weight: 400;
color: #26a69a;
margin-top: 30px;
width: 100%;
text-transform: capitalize;
padding: 12px 25px;
border-radius: 23px;
letter-spacing: 0.25px;
border: 1px solid #26a69a;
transition: all .3s;
outline: none;
}
<div class="col-lg-6">
<fieldset>
<textarea name="description" type="text" class="form-control" id="Description" placeholder="Description Of Item - Please Don't Use Special Characters Including Commas" required="yes"></textarea>
</fieldset>
</div>
<div class="col-lg-12">
<fieldset>
<button type="submit" id="form-submit" class="main-button">Next</button>
</fieldset><br>
</div>
I have tried changing the CSS so it corresponds to the col-lg-6 and col-lg-12 class (or .main-button and .form-control classes) instead of form#contact textarea or form#contact button with no luck. Most advice on here was regarding padding and display: inline-block or display: block, both of which already seem to be covered though I tried adjusting them just to see. I also tried adjusting min and max height for the textarea. I'm pretty new to both languages so maybe I am missing something obvious here.