H1 исчезает на мобильных устройствах. Могу ли я заставить его всегда появляться?

Question

У меня есть ползунок на странице, в нем есть пара <a> и 1 <h1> и изображения в качестве фона, но когда я получил меньшее разрешение, текст go исчез. Я использовал bootstrap, но я не вижу никаких свойств, которые могли бы применить это. Более того, другие заголовки на странице, которых нет в слайдере, продолжают показываться. Таким образом, мой вопрос заключается в том, как лучше всего заставить элемент всегда быть сверху. Я публикую свойства h1 отладки, пока он исчезает, так как css и html довольно lage.

background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-size: auto;
box-sizing: border-box;
color: rgb(255, 255, 255);
font-family: "Open Sans", sans-serif;
font-size: 40px;
font-weight: 700;
line-height: 30px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 20px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 0px;
padding-top: 5px;
text-align: center;
text-shadow: 0px 1px 2px rgba(0,0,0,0.6);
text-transform: uppercase;

Вот HTML

<section class="slider">
  <div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
    <div class="carousel-inner">
      <div class="item"> <img data-src="images/slider/slider2.jpg" alt="First slide" src="images/slider/slider2.jpg">
        <div class="container">
          <div class="carousel-caption">
            <h1 class="" data-tag="text5">Text5 text5 text5 text5</h1>
            <p data-tag="text6">Text6 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5</p>
            <p><a data-tag="text6001" class="btn btn-default btn-lg" href="#" role="button" >get started</a><a data-tag="text6002" class="btn btn-default btn-lg" href="#" role="button">read more</a></p>
          </div>
        </div>
      </div>
      <div class="item active"> <img data-src="images/slider/slider.jpg" alt="Second slide" src="images/slider/slider.jpg">
        <div class="container">
          <div class="carousel-caption">
            <h1 class="" data-tag="text1">Text1 text1 text1 text1 text1text1text1 text1text1 .</h1>
            <p data-tag="text2">text2 text2text2 text2text2text2 text2text2text2text2 text2text2</p>
            <p><a data-tag="text2001" class="btn btn-default btn-lg" href="#" role="button">get started</a><a class="btn btn-default btn-lg" href="#" role="button" data-tag="text2002">read more</a></p>
          </div>
        </div>
      </div>
      <div class="item"> <img data-src="images/slider/slider1.jpg" alt="Third slide" src="images/slider/slider1.jpg">
        <div class="container">
          <div class="carousel-caption">
            <h1 class="" data-tag="text3" >Text3 Text3 Text3 Text3</h1>
            <p data-tag="text4">Text4 text4 text4text4text4text4text4text4 text4text4  text4</p>
            <p><a data-tag="text4001" class="btn btn-default btn-lg" href="#" role="button">get started</a><a data-tag="text4002" class="btn btn-default btn-lg" href="#" role="button">read more</a></p>
          </div>
        </div>
      </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon carousel-control-left"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon carousel-control-right"></span></a> </div>
</section>