Bootstrap carousel caption does not show up in fullscreen 1920 x 1080?

Question

I'm trying to figure out why carousel-caption will not display in a blown up 1920x1080 window. If the window isn't blown up then the caption shows fine. The code in question:

<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>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">

    <div class="item active">
      <img src="<?php echo get_bloginfo('template_directory');?>/img/banner-1.jpg" alt="Competitive Prices on Web Design, SEO, and Digital Marketing" />
      <div class="carousel-caption">
        <h3>Quality Web Design</h3>
        <p>Simple and Elegant Web Design, Located in Rochester Hills, Michigan</p>
      </div>
    </div>

    <div class="item">
      <img src="<?php echo get_bloginfo('template_directory');?>/img/banner-3.jpg" alt="Get Your Business Online Today" />
      <div class="carousel-caption">
        <h3>Get Your Business Online Today!</h3>
        <p> ... </p>
      </div>
    </div>

    <div class="item">
      <img src="<?php echo get_bloginfo('template_directory');?>/img/banner-2.jpg" alt="Drive Traffic to Your Site" />
      <div class="carousel-caption">
        <h3>SEO</h3>
        <p>Proper search engine optimization may make or break your website's visibility!</p>
      </div>
    </div>
  </div>

You can see it in action here: http://foxpile.net/wordpress/

When I replace the images with one outside of the theme (I've used http://placehold.it/1920x500 .. everything seems to work correctly)

I am running on the latest version of Wordpress and Bootstrap 3.2.0

Answer 1

Add top: 46%; in the .carousel-caption while resolution greater than 1280px. This will fix the issue try inspecting with code inspector like firebug etc.

Find following media query in bootstrap or if you are over-riding Bootstrap CSS than add this in over-riding css file;

@media only screen and (min-width : 1200px) {
  .carousel-caption
  {
    top: 46%;
  }
}

on larger resolution caption moves down wards have more offset on top and does not show due to container overflow hidden. What i did on resolution greater than 1200px i have i reduced caption top offset. This make it show on even 1920x1080p.

good luck!

Answer 2

The images coming with your theme have a 1920x650 size, while the carousel has an explicit max-height specified

.carousel-inner {
    width: 100%;
    max-height: 500px !important;
}

Using your placeholder images lead to having an image that is smaller, and thus will display until someone with a wider screen arrives.

The solution is either to:

• allow the banner to grow over 500px (by removing this max-height)
• use images with a height smaller or equal to 500px, but you need in that case to define their behavior on a bigger screen
• change the position of the caption to be relative to the carousel, and not to the item