Make bootstrap carousel image and text readable in mobile - html

Question

My bootstrap carousel looks fine on desktop. The images are sized at 1200x400. But on mobile, it shrinks in so much that you can't ready the text on the images. Also, the navigation dots on the bottom of the player move up on top of the image.
1) How do I keep the size big enough to read the text on the images on mobile
2) How do I prevent the navigation dots on the bottom of the player from overlapping on my image on mobile
Here's my bootply:
http://www.bootply.com/huskydawgs/6UtgjHqm8f
Here's my html:
<div class="content-section-b">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="http://www.onvia.com/responsive/apple_orange_testimonials.png" alt="Apples and Oranges">
</div>
<div class="item">
<img class="img-responsive" src="http://www.onvia.com/responsive/pears_mangos_testimonials.png" alt="Pears and Mangos">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-b -->
Here's my css:
.content-section-b {
padding: 50px 0;
background-color: #3C5A78;
}
.carousel-control.left {
background-image:none;
}
.carousel-control.right {
background-image:none;
}

Answer 1

The problem is with the source images: they make it seem as if they were two different carousel items, when are in fact only one (apple-orange & pear-mango)... For a quick fix, you could make individual images from the sources (one for each fruit), hide the regular carousel through media queries on xs screens, and have a visible-xs carousel which has 4 instead of 2 carousel items.
It's not a great solution, though.
Fast example: http://www.bootply.com/U5uYwmnt1g
EDIT
Added the CSS to move the navigation dots on mobile not to overlap with the slides.
Expanding on why it's not the best solution:
-You should make the elements of the carousel be html elements, for a start, and not rely completely on images with shapes and text inside (everything on your images can be replicated easily with CSS, using images only for the fruits, or for the fruits and the cirle, if you don't care to make the circle with CSS)
-Once this is done, you could skip the 2nd carousel and modify the content of each slide through media queries (or helper classes) to get the desired result
-The CSS for the navigation dots uses the max-width query, which I understand is not usually recomended, though in this case it might be well used (if somebody can expand on this, please do)