html - 调整屏幕大小时，按钮离开页面

Question

一切都很好，除非调整屏幕大小时按钮会离开屏幕。我试图解决这个问题，但我一直无法弄清楚如何解决这个问题。我还附上了屏幕截图，以便更好地了解我在说什么。使用 HTML5 CSS3 和 Bootstrap

<section id="prod-one" class="prod-one">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="col-md-6 col-sm-6">
                    <div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
                        <img src="images/cusotm%20image.jpg" alt="Custom">
                    </div>
                </div>
                <div class="col-md-6 col-sm-6">
                    <div class="block wow fadeInLeft" data-wow-delay=".3s" data-wow-duration="500ms">
                        <h3>test</h3>
                        <h2>test</h2>
                        <p class="par-one-ma">test</p>
                        <p>
                            test
                        </p>
                        <div class="area-fir"><a class="btn-max" href="#">Discover</a>  </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS

#prod-one {
    padding-top: 140px;
    padding-bottom:;
}

#prod-oned .block {
    padding: 20px 30px 30px;
}

#prod-one .block h2 {
    font-size: 25px;
    font-weight: 500;
    margin-bottom: 30px;
    text-transform: none;
    color: #00bfff;
}

#prod-one.block h3 {
    font-size: 40px;
    font-weight: 400;
    margin-bottom: 30px;
    text-transform: uppercase;
}


#prod-one.block p {
    color: #727272;
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 35px;
}

#prod-one .block img {
    max-width: 100%;
    padding-top: 25px;
}

#prod-one .block .matrix-bold {
    font-weight: 500;
    margin-top: -20px;
}

.btn-max {
    width: auto;
    margin-right: auto;
    padding: 2% 50%;
    font-weight: 500;
    text-decoration: none;
    background-color: #fff;
    color: #00bfff;
    transition: background-color 0.2s, border 0.2s, color 0.2s;
    border: 2px solid #00bfff;
    letter-spacing: .5px;
    font-size: 18px;
}

    .btn-max:hover,
    .btn-max:active {
        border: 2px solid #00bfff;
        background-color: #00bfff;
        color: #1c1c1c;
    }

Answer 1

#prod-one {
    padding-top: 140px;
    padding-bottom:;
}

#prod-oned .block {
    padding: 20px 30px 30px;
}

#prod-one .block h2 {
    font-size: 25px;
    font-weight: 500;
    margin-bottom: 30px;
    text-transform: none;
    color: #00bfff;
}

#prod-one.block h3 {
    font-size: 40px;
    font-weight: 400;
    margin-bottom: 30px;
    text-transform: uppercase;
}


#prod-one.block p {
    color: #727272;
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 35px;
}

#prod-one .block img {
    max-width: 100%;
    padding-top: 25px;
}

#prod-one .block .matrix-bold {
    font-weight: 500;
    margin-top: -20px;
}

.btn-max {
    width: auto;
    margin-right: auto;
    padding: 2% 44%;
    font-weight: 500;
    text-decoration: none;
    background-color: #fff;
    color: #00bfff;
    transition: background-color 0.2s, border 0.2s, color 0.2s;
    border: 2px solid #00bfff;
    letter-spacing: .5px;
    font-size: 18px;
}

    .btn-max:hover,
    .btn-max:active {
        border: 2px solid #00bfff;
        background-color: #00bfff;
        color: #1c1c1c;
    }

<section id="prod-one" class="prod-one">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="col-md-6 col-sm-6">
                    <div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
                        <img src="images/cusotm%20image.jpg" alt="Custom">
                    </div>
                </div>
                <div class="col-md-6 col-sm-6">
                    <div class="block wow fadeInLeft" data-wow-delay=".3s" data-wow-duration="500ms">
                        <h3>test</h3>
                        <h2>test</h2>
                        <p class="par-one-ma">test</p>
                        <p>
                            test
                        </p>
                        <div class="area-fir"><a class="btn-max" href="#">Discover</a>  </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

更新你的 css [padding: 2% 45%;] 如下完美:-

.btn-max {
font-weight: 500;
text-decoration: none;
background-color: #FFF;
color: #00BFFF;
transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s;
border: 2px solid #00BFFF;
letter-spacing: 0.5px;
font-size: 18px;
width: 21%;
padding: 2% 45%;