2

What i've done is create a webpage using the bootstrap carousel.

The problem is that while the transition occurs the text is at one height. Once that movement is complete (during the pause sequence) that text moves. An example can be seen here www.r3gamers.com if you look closely (it moves about 2px right now).

The problem is, in my recent edits, this has got much worse. It now jumps about 50px downwards and i don't know how to keep the height the same as it is when it transitions. I can adjust the height of the text via padding and margins but this doesn't limit the amount the text jumps.

I believe the problem has been caused by cropping the image size, but i'm not certain.

The php code

echo'<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>';
        for ($i = 1; $i < $rows; $i++){
        echo'<li data-target="#carousel-example-generic" data-slide-to="'.$i.'"></li>';
        }
   echo'</ol>

      <!-- Wrapper for slides -->';
      $row2 = mysqli_fetch_array($r2, MYSQLI_ASSOC);
echo'<div class="carousel-inner" role="listbox">
        <div class="item active">
        <a href="Article.php?id=' . $row2['ArticleID']. '">
         <img class="cropped-top cropped-bottom" src="'.$row2["BackgroundImage"].'"></a>
          <div class="carousel-caption">
          <h3>'.$row2['ArticleTitle'].'</h3>
          <h4>Written by '.$row2['Username'].'</h4>  
          </div>
        </div>';
    while ($row2 = mysqli_fetch_array($r2, MYSQLI_ASSOC)) {
    echo'<div class="item">
          <a href="Article.php?id=' . $row2['ArticleID']. '">
           <img class="shading cropped-top cropped-bottom" src="'.$row2["BackgroundImage"].'"></a>
                <div class="carousel-caption">
                <h3>'.$row2['ArticleTitle'].'</h3>
                <h4>Written by '.$row2['Username'].'</h4>    
                </div>
        </div>';
    }
echo'</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>';

The CSS

@media screen and (min-width: 768px)
.carousel-caption {
  right: 20%;
  left: 20%;
  padding-bottom: 300px;
}
.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 50px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 300px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

And other than those two fields, i can't see any css that would affect the carousel, although i'll add it if there is any more anybody can think of.

Any help as to why this is happening or how to fix it will be great.

Spratters53
  • 415
  • 5
  • 23

1 Answers1

1

Exchange the value bottom:-11%; of the class .item.active to bottom: -10.7%; as described below:

/* line 6058 in bootstrap.css */

@media not all, (-webkit-transform-3d)
.carousel-inner > .item.next.left, .carousel-inner > .item.prev.right, .carousel-inner > .item.active {
    left: 0;
    bottom: -10.7%; /* <= Exchange bottom value for this <= */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
Chun
  • 2,230
  • 5
  • 24
  • 46
  • Thank you. I'd tried messing with them before but it seems that depending on the padding previously the number might need to be increased or decreased. changing mine by .3% did nothing but when i changed "bottom" to 20% it nearly lined up. Thanks for the point in the right direction. – Spratters53 Apr 12 '15 at 11:04