Make bootstrap carousel image and text readable in mobile
<p>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. </p>

<p>1) How do I keep the size big enough to read the text on the images on mobile</p>

<p>2) How do I prevent the navigation dots on the bottom of the player from overlapping on my image on mobile </p>

<p><a href="https://i.stack.imgur.com/wFAly.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wFAly.png" alt="enter image description here"></a></p>

<p>Here's my bootply:
<a href="http://www.bootply.com/huskydawgs/6UtgjHqm8f" rel="nofollow noreferrer">http://www.bootply.com/huskydawgs/6UtgjHqm8f</a></p>

<p>Here's my html:</p>

<pre><code>   &lt;div class="content-section-b"&gt;

    &lt;div class="container"&gt;

        &lt;div class="row"&gt;
            &lt;div class="col-lg-12"&gt;
                &lt;div id="carousel-example-generic" class="carousel slide" data-ride="carousel"&gt;
                  &lt;!-- Indicators --&gt;
                  &lt;ol class="carousel-indicators"&gt;
                    &lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                    &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
                  &lt;/ol&gt;

                  &lt;!-- Wrapper for slides --&gt;
                  &lt;div class="carousel-inner" role="listbox"&gt;
                    &lt;div class="item active"&gt;
                      &lt;img class="img-responsive" src="http://www.onvia.com/responsive/apple_orange_testimonials.png" alt="Apples and Oranges"&gt;
                    &lt;/div&gt;
                    &lt;div class="item"&gt;
                      &lt;img class="img-responsive" src="http://www.onvia.com/responsive/pears_mangos_testimonials.png" alt="Pears and Mangos"&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;

                  &lt;!-- Controls --&gt;
                  &lt;a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"&gt;
                    &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
                    &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"&gt;
                    &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
                    &lt;span class="sr-only"&gt;Next&lt;/span&gt;
                  &lt;/a&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/div&gt;
    &lt;!-- /.container --&gt;

&lt;/div&gt;
&lt;!-- /.content-section-b --&gt;
</code></pre>

<p>Here's my css:</p>

<pre><code>    .content-section-b {
    padding: 50px 0;
    background-color: #3C5A78;
}

.carousel-control.left {
    background-image:none;
}

.carousel-control.right {
    background-image:none;
}
</code></pre>