css text not showing when responsive for mobile - css

Question

First image is for desktop view.it is alright , but when i watch the mobile view in browser . the h1 is going up and not showing in screen.
//second image is for mobile view. i hope have explained the problem here.
html code
<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>
Find Out More
</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>
Find Out More
</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>
Find Out More
</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 code
#slide{
width: 100%;
padding-left: 0px;
padding-right: 0px;
}

Answer 1

Please check Bootstrap css and find the following.
#media screen and (max-width: 767px) {
/* Hide captions class */
.carousel-caption {
display: none
}
}

Answer 2

Add on bottom of last CSS file, or in media.css for CSS queries:
#media screen and (min-width: 300px) and (max-width: 767px){
/* Hide captions class */
.carousel-caption {
display: block !important;
}
}