モバイル用のレスポンスでCSSのテキストが表示されない

Question

最初の画像はデスクトップview.it用ですが、ブラウザでモバイルビューを見ると問題ありません。 h1が上がって画面に表示されません。

// 2番目の画像はモバイルビューです。私はここで問題を説明したと思います。

htmlコード

<div class="container" id="slide"> 

     <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
      <li data-target="#myCarousel" data-slide-to="1"></li> 
      <li data-target="#myCarousel" data-slide-to="2"></li> 
     </ol> 

     <!-- Wrapper for slides --> 
     <div class="carousel-inner"> 
      <div class="item active"> 
      <img src="img/bg3.jpg" alt="Los Angeles" style="width:100%; max-height: 900px;"> 

      <div class="carousel-caption"> 
      <img src="img/logo1.png" width="50px;" height="50px;"> 

      <h1 style="font-size: 75px; font-weight: bold; color: #fc4128; text-shadow: 2px 2px #00a0c6; padding-bottom: auto; ">Bluebay Systems Ltd</h1> 


      <h3 style="color:white; font-weight: bold;padding-bottom: 50px;">Complete IT Solution For Your Every Need</h3> 
      <br> 
      <br> 
      <a href="#about" class="btn btn-dark btn-lg">Find Out More</a> 
     </div> 
      </div> 

      <div class="item" style=" max-height: 900px;"> 
      <img src="img/bg1.jpg" alt="Chicago" style="width:100%; max-height: 900px;"> 
      <div class="carousel-caption"> 
      <img src="img/logo1.png" width="50px;" height="50px;"> 

      <h1 style="font-size: 75px; font-weight: bold; color: #fc4128; text-shadow: 2px 2px #00a0c6; padding-bottom:auto; ">Bluebay Systems Ltd</h1> 

      <h3 style="color: white; font-weight: bold;padding-bottom: 50px;" >Complete IT Solution For Your Every Need</h3> 
      <br> 
      <a href="#about" class="btn btn-dark btn-lg">Find Out More</a> 
     </div> 
      </div> 

      <div class="item"> 
      <img src="img/bg.jpg" alt="New york" style="width:100%; max-height: 900px;"> 
      <div class="carousel-caption"> 
      <img src="img/logo1.png" width="50px;" height="50px;"> 

      <h1 style="font-size: 75px; font-weight: bold; color: #fc4128; text-shadow: 2px 2px #00a0c6; padding-bottom: auto; ">Bluebay Systems Ltd</h1> 

      <h3 style="color: white; font-weight: bold; padding-bottom: 50px;padding-top: 10px;" >Complete IT Solution For Your Every Need</h3> 
      <br> 
      <a href="#about" class="btn btn-dark btn-lg">Find Out More</a> 
     </div> 
      </div> 
     </div> 

     <!-- Left and right controls --> 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
      <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
      <span class="sr-only">Next</span> 
     </a> 
     </div> 
    </div> 

CSSコード

#slide{ 

    width: 100%; 

    padding-left: 0px; 
    padding-right: 0px; 
} 

Answer 1

ご確認くださいcssをブートストラップし、以下を見つけてください。

@media screen and (max-width: 767px) { 

    /* Hide captions class */ 
    .carousel-caption { 
    display: none 
    } 
} 

Answer 2

最後のCSSファイルの一番下に追加、またはCSSクエリのmedia.css中：

@media screen and (min-width: 300px) and (max-width: 767px){ 


    /* Hide captions class */ 
    .carousel-caption { 
    display: block !important; 
    } 
}