Boostrap carousel is not resizing text

Question

I'm using Bootstrap with Flat UI framework, and I've come to a problem with Carousel.

I have my carousel code as:

<section>
<!-- slider obrázků-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- tečky které identifikují pořadí-->
    <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>   
    <!-- první slide-->
    <div class="carousel-inner">
        <div class="item active">       
        <img src="img/ZemOlymp4.JPG" class="img-responsive">
            <div class="carousel-caption">
            <!--text vypsaný uvnitř obrázku-->
              <h3>Vítězství v celostátní zemědělské soutěži</h3>
              <p>Jakub Procinger, student 3. ročníku agropodnikání na Městské střední odborné škole v Kloboukách u Brna, získal první místo na zemědělské olympiádě v Českých Budějovicích</p>
              <button class="btn btn-embossed btn-primary">Číst dále</button>
            </div>
        </div>
        <!-- druhý slide -->
        <div class="item">
            <img src="img/DSC_0304.JPG" class="img-responsive">
            <div class="carousel-caption">
              <!-- text vypsaný uvnitř obrázku-->
              <h3>Školní výlet do Anglie</h3>
              <p></p>
            </div>
        </div>
        <!-- třetí slide-->
        <div class="item">
            <img src="img/DSC_0558.JPG" class="img-responsive">
            <div class="carousel-caption">
              <!--text vypsaný uvnitř obrázku-->
              <h3>Školní výlet do Anglie</h3>
              <p>Londýnské oko/London's Eye</p>
            </div>
        </div>
    </div>
    <!-- navigace slideru-->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">
    </a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">
    </a>
</section>

When I check my site via responsiView, if its responsive, the image itself resizes, but the text inside is still big.

I've tried :

@media (max-width: 767px) {
   .carousel h3 {
      font-size: 30px;
      }
}

but it didn't help.

Answer 1

I believe bootstrap already got an idea of what your font-size should be. Since bootstrap uses jQuery/javascript for inline-styling it overrides your media query as it is "closer" to your element and therefore a higher priority.

Either you could right click on the h3 element and select "inspect element" with chrome/firefox to find where the boostrap style is placed (and edit it manually in the .css file), or you could simply add an !important to your style:

@media (max-width: 767px) {
   .carousel h3 {
      font-size: 30px !important;
      }
}