bootstrap carousel caption is hiding on mobile screen if screen size is <= 4 inch - twitter-bootstrap-3

Question

Hi Friends i am using bootstrap 3 carousal. I am facing once problem in mobile when the mobile screen is <=4 inch. My slider's caption is hiding half on left side on the smaller screen. please help.
Code:
<div id="kc1" class="carousel " data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators hidden-xs">
<li data-target="#kc1" data-slide-to="0" class="active"></li>
<li data-target="#kc1" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active" id="websites">
<img class="img-responsive" src="img/full-responsive-websites-system-solutions1.jpg";text="Slide+0" alt="Slide 0">
<div class="carousel-caption img-rounded featurette-heading text-center col-md-offset-1 opa1 onee1" style="background-color:#004080;">
<h1 style="font-size:25px;">This is test example and half caption is hiding in left side on mobile device below <=4 inch screen </h1>
<h6>
More
</h6>
</div>
</div>
<div class="item" id="SEO-SEM">
<img class="img-responsive" src="img/seo-sem.jpg";text="Slide+1" alt="Slide 1">
<div class="carousel-caption img-rounded featurette-heading text-center col-md-offset-2" style="background-color:#000;">
<h2> This is test example and half caption is hiding in left side on mobile device below <=4 inch screen</h2>
<h6> More </h6>
</div>
</div>
</div>
<a class="left carousel-control" href="#kc1" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#kc1" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<style>
<!-- carousel css-->
.btn-clear {
color: #FFF;
border-color: #FFF;
border-width: 2px;
margin-right: 15px;
}
btn-clear:hover {
color: #000;
background-color: #6699CC;
}
#kc1
{
border-radius: 0px 0px 0px 0px; /* slider.css ln-17*/
/* added by kk */
overflow: hidden;
/* added by kk */
margin-top: 1px;
min-height: 300px;
min-width: 100%;
}
#kc1 img {
min-height: 300px;
min-width: 100%;
}
#kc1 > .carousel-indicators > li {
border-radius: 2px;
min-width: 2px;
background-color:#D4FF00;
border: 1px solid black;
margin-right: 1px;;
margin-left: 1px;;
}
#kc1 > .carousel-indicators > .active {
background-color:#2AFF00;
}
#kc1 .carousel-caption {
color: blue;
right: 50%;
text-align: center;
background:#fff;
left: auto;
top:12%;
bottom: initial;
transform: translateY(-50%);
transform:translateX(50%);
color:#FFF;
max-width: 1200px;
}
.item {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-
}
</style>
Here's a jsfiddle for clarification

Answer 1

The caption in a carousel is actually being controlled in the site.css file under this part:
/* Hide/rearrange for smaller screens */
#media screen and (max-width: 767px) {
/* Hide captions */
.carousel-caption {
display: none
}
}