ホームページスライダーは、モバイルデバイス上でうまく表示されない

Question

.main-slider-img > img{ 
 
     width: 100%; 
 
    } 
 
    .main-slider-content { 
 
     left: 15%; 
 
     margin-top: -146px; 
 
     position: absolute; 
 
     top: 50%; 
 
    } 
 
    .main-slider-content > h2{ 
 
     line-height: 50px; 
 
     padding: 0 25px; 
 
     background-color: #68a868; 
 
     display: inline-block; 
 
     text-shadow:2px 2px 0 rgba(0, 0, 0, 0.1); 
 
    } 
 
    .main-slider-content > h3{ 
 
     font-size: 30px; 
 
     font-weight: 800; 
 
     line-height: 45px; 
 
     letter-spacing: 2px; 
 
    } 
 
    .main-slider-content > h3::after { 
 
     
 
     position: absolute; 
 
     bottom: -8px; 
 
     content: " "; 
 
     display: block; 
 
     height: 3px; 
 
     left: 0; 
 
     width: 80px; 
 
    } 
 
    .main-slider-content a{ 
 
     line-height: 38px; 
 
     padding: 4px 22px 0; 
 
     color: #fff; 
 
     border: 3px solid #fff; 
 
     display: inline-block; 
 
     text-decoration: none; 
 
    } 
 
    .main-slider-content a > i{ 
 
     margin-left: 6px; 
 
    } 
 
    .main-slider-content a:hover{ 
 
     background-color: #fff; 
 
     color: #5cb85c; 
 
    } 
 
    .main-slider.owl-theme .owl-controls { 
 
     margin-top: 0; 
 
     position: absolute; 
 
     top: 50%; 
 
     width: 100%; 
 
    } 
 
    .main-slider.owl-theme .owl-prev { 
 
     left: 20px; 
 
     position: absolute; 
 
    } 
 
    .main-slider.owl-theme .owl-next { 
 
     right: 20px; 
 
     position: absolute; 
 
    } 
 
    
 
    .main-slider.owl-theme .owl-controls .owl-buttons div { 
 
     border-radius: 0; 
 
     color: #fff; 
 
     line-height: 88px; 
 
     opacity: 1; 
 
     background-color: rgba(255, 255, 255, 0.4); 
 
     padding: 0 10px; 
 
     -webkit-transition: all .5s ease ; 
 
     -moz-transition: all .5s ease ; 
 
     -ms-transition: all .5s ease ; 
 
     -o-transition: all .5s ease ; 
 
     transition: all .5s ease ; 
 
    } 
 
    .main-slider.owl-theme .owl-controls .owl-buttons div:hover{ 
 
     background-color: rgba(92, 184, 92, 0.4); 
 
    } 
 
    .slide-2 { 
 
     height: 100%; 
 
     left: 0; 
 
     margin-top: -90px; 
 
     width: 100%; 
 
    } 
 
    .slide-2 > h3 { 
 
     font-size: 45px; 
 
     line-height: 55px; 
 
    } 
 
    .main-slider-content.slide-2 > h3:after{ 
 
     display: none; 
 
    } 
 
    .overlay{ 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     width: 100%; 
 
     height: 100%; 
 
     background: rgba(54, 54, 54, 0); 
 
     opacity: 0.6; 
 
    } 
 

 
.main-slider-img.position-r > img{ 
 
\t \t height: auto; 
 
\t } 
 
\t .main-slider-content{ 
 
\t \t left: 5%; 
 
\t \t top: 8%; 
 
\t \t margin-top: 0; 
 
\t } 
 
\t .main-slider-content > h3{ 
 
\t \t font-size: 20px; 
 
\t \t line-height: 24px; 
 
\t } 
 
\t .main-slider-content > h4{ 
 
\t \t line-height: 22px; 
 
\t } 
 
\t .slide-2{ 
 
\t \t margin-top: 0; 
 
\t } \t 
 
\t .slide-2 > h3{ 
 
\t \t font-size: 20px; 
 
\t \t line-height: 24px; 
 
\t }

<div class="container-fluid no-padding"> 
 
      <div class="main-slider"> 
 
       <div class="item"> 
 
        <div class="main-slider-img position-r"> 
 
         <img src="http://www.trezalliance.com/img/s1.jpg" alt=""> 
 
         <div class="overlay"></div> 
 
         
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="main-slider-img position-r"> 
 
         <img src="http://www.trezalliance.com/img/s2.jpg" alt=""> 
 
         <div class="overlay"></div> 
 
         
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div>

私は私が私のブラウザを縮小またはスライダーの画像は上の適切なフォームとを失い携帯電話で私のウェブサイトを開くたびに私のホームページスライダーで問題を抱えています同じスライダー、スライドは自動的に変更されません。私はそれを理解しようと多くの時間を費やしました。

My URL

Answer 1

は

.main-slider-img.position-r > img { 
    height: auto; 
} 

にライン10とライン346

.main-slider-img.position-r > img { 
    height: 500px; 
} 

であなたのresponsive.cssを変更し、あなたが持っているあなたのCSSに

@media (max-width: 767px) { 
    .main-slider.owl-theme .owl-controls { 
     top: 20% 
    } 
} 

Answer 2

を追加します。すべてのメディアで

.main-slider-img.position-r > img { 
    height: auto; 
} 

へ

.main-slider-img.position-r > img { 
    height: 500px; 
} 

変更は、あなたの質問に直接あなたのコードを入力してください