Wenn die Größe des Bildschirms geändert wird, wird die Schaltfläche

Question

Alles ist gut, außer wenn die Größe des Bildschirms geändert wird die Schaltfläche vom Bildschirm verschwindet. Ich habe versucht, das zu beheben, aber ich konnte nicht herausfinden, wie ich das beheben kann. Ich habe auch Screenshots beigefügt, um eine bessere Vorstellung davon zu bekommen, wovon ich rede. Mit HTML5 CSS3 und 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>

Aktualisieren Sie Ihre CSS [padding: 2% 45%;] als Werke folgt perfekt: -

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

}