Bootstrap Carousel CSS text moving on transition to active item

Question

I am having an issue similar to Bootstrap Carousel Caption moves after transition complete but I still haven't solved it reading/trying the solution...

The text (in .carousel-caption) pops down from the top during the slide transition in the carousel. My goal is to have it stay near the bottom. I HAVE modified the CSS on the carousel but at some point must have messed something up. I haven't found it yet and my last resort after this post is to start over! :D

Note: The issue only happens at of above 768 pixels browser width.

You can view my issue here: http://wfsu.org/2016copy/education/ I put a transparent background on .carousel-caption so it's easier to see the issue. But this also works if you put a background on .item.

Here are my carousel related CSS changes for @media (min-width: 768px)

.carousel-caption {
        position:absolute!important;
        top: inherit!important;
        background-color: rgba(0, 0, 0, 0.5);
        bottom:0;/*was 20px*/
        padding-top:0!important;/*was 20px*/
        padding-bottom:10px;/*was 30px*/
        padding-right:inherit!important;
        padding-left:inherit!important;
        right:0!important;/*was 20%*/
        left:0!important;/*was 20%*/
        background: inherit;
        border-bottom: 17px solid $accent-green;
    }

CSS changes to carousel for below 768 px

/*carousel*/
.carousel-control .fa-chevron-circle-left, .carousel-control .fa-chevron-circle-right, .carousel-control .icon-next, .carousel-control .icon-prev {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
    margin-top: -10px;
}

.carousel-caption {
    position: relative;
    left: auto;
    right: auto;
    background:$primary-green;
    border-bottom: 17px solid $accent-green;
    padding-top:1px;
    padding-right:10px;
    padding-left:10px;
    top: 0;

}
.carousel-control.left, .carousel-control.right {
    background-image: none!important;
}
.carousel-indicators {
    bottom:-15px;/*was 20px*/
}

Thank you

score 0 · Answer 1 · answered Apr 06 '16 at 20:18

I figured it out....maybe this will help someone out in the future.

On the .carousel-caption styles for @media (min-width: 768px) I changed top: inherit!important; to top: auto!important. Seems to have worked but as of now I don't fully understand the difference between the inherit and auto values.

Bootstrap Carousel CSS text moving on transition to active item

1 Answers1