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

3 Views

I’m trying to figure out why carousel-caption will not display in a blown up 1920×1080 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>

Read More

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/1920×500 .. everything seems to work correctly)

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

Post Views: 3

Related posts

Leave a Reply

3 comments

  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!

  2. The images coming with your theme have a 1920×650 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

  3. Even though this is relatively an old post, this could be helpful for some people. You may also just add fixed height value to .item divs:

    PenCode 1

    .carousel-inner .item {
  height: 400px;  /* add this */
}

    This approach has another benefit if you add the images as background images for .item divs rather than images, and add background-size:cover; to the .item CSS, you’ll get a responsive image without having to deal with images height for small screens.

    CodePen 2

    * Resize both pens and see the difference height