内容未在移动视图的页面上向下推页脚

Question

大家下午好，

我想知道你能不能帮帮我？

当我查看桌面视图时，我的表单工作正常，但它在移动视图上被截断，我不知道为什么。

我的代码是：

.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> &nbsp &nbsp
                        <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>

非常感谢您提前提供的帮助。

一切顺利

安德鲁

Answer 1

The CSS is:


.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;
}

非常感谢您提前提供的帮助