は、ボタンがページ消灯

Question

すべてが画面をボタンが画面から消えてリサイズされたときを除いて良いです。私はこれを修正しようとしましたが、私はこれを解決する方法を見つけ出すことができませんでした。私はスクリーンショットを添付して、私が話していることのより良いアイデアを得ることができます。 HTML5 CSS3とブートストラップ

<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 [パディング：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%; 

}