Hello everyone,
Can you assist me with a query, please?
My form works perfectly fine in desktop view, but it gets cut off on mobile view and I'm unsure of the reason why.
Here is my code:
.upload-pic {
position: absolute;
max-width: auto;
max-height: auto;
padding: 0;
z-index: -1;
}
.upload-form-section {
clear: left;
background-size: cover;
background-position: center;
height: 950px;
position: relative;
}
.upload-form {
font-family: Montserrat, sans-serif;
padding-top: 260px;
background-color: rgba(255, 255, 255, 0.555);
max-width: 90%;
position: relative;
padding: 30px;
clear: initial;
}
.submit-heading {
font-family: Montserrat, sans-serif;
color: #2a5490;
padding-top: 140px;
padding-left: 83px;
}
p.donate {
font-family: Montserrat, sans-serif;
padding-top: 10px;
padding-left: 83px;
padding-bottom: 20px;
}
.text-input {
width: 100%;
height: 25px;
margin: 5px 0 20px 0;
border: 0.5px solid #000000;
}
.text-input:hover {
border-color: #df6530;
}
.upload-button {
margin-top: 20px;
margin-bottom: 20px;
padding: 15px 32px 15px 32px;
text-align: center;
font-size: 100%;
background-color: #df6530;
border-color: #df6530;
color: #fff;
display: block;
}
.btn-success:hover {
background-color: #2a5490;
border-color: #2a5490;
padding-top: 10px;
}
.btn-success:active {
background-color: #df6530 !important;
border-color: #df6530 !important;
}<section class="upload-form-section">
<h4 class="submit-heading">Submit and showcase your skills</h4>
<p class="donate">Please donate, fill in the form and upload your video. Our friendly coaches will get back to you with our thoughts and constructive feedback.</p>
<div class="container">
<div class="row">
<div class="col">
<form class="upload-form" method="POST" action="https://formdump.website.net/">
<label for="name">Your Name:</label>
<input type="text" id="name" name="name" class="text-input" required>
<label for="email">Your Email (used to donate):</label>
<input type="email" name="email_address" id="email_address" class="text-input" required>
<label for="phone">Your Phone Number:</label>
<input type="text" id="phone_number" name="phone_number" class="text-input" required>
<p>I’d prefer to be contacted by:
<label for="phone">Phone</label>
<input type="radio" name="contact_preference" id="phone" value="phone" required>    
<label for="email">Email</label>
<input type="radio" name="contact_preference" id="email" value="email" required>
</p>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
<button type="submit" class="btn btn-success upload-button"> Upload <i class="fas fa-upload"></i></button>
<p>I would like to make a donation to be shared with the charities we are supporting. <a
href="https://www.paypal.com/" target="_blank"><i class="fab fa-cc-paypal"></i></a></p>
</form>
</div>
</div>
</div>
</section>I appreciate any help you can provide.
Best regards
Andrew