Ekranı yeniden boyutlandırırken, düğme sayfa

Question

'dan çıkıyor. Ekran yeniden boyutlandırıldığında, ekran kapanır dışında her şey iyidir. Bunu düzeltmeye çalıştım ama bunu nasıl çözeceğimi anlayamadım. Ne hakkında konuştuğumu daha iyi anlamak için ekran görüntüleri ekledim. HTML5 CSS3 ve önyükleme

<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 kullanarak

#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>

güncelleme css [padding:% 2% 45;] mükemmel eserler aşağıdaki gibidir: -

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

}