Carousel Links Not Working in Chrome

Hi Amy_bubble,

I just tried this on Chrome for mac and the green “Click to view” buttons seem to be working fine for me. It’s not that the overlapping vertical grey carousel gradient bar is being clicked instead, causing the carousel to rotate to the previous image?

Try doing Right Click > Inspect Element and seeing whether chrome highlights <a class="left carousel-control".. in the code or <a href="https://www.bubble-jobs.co.uk...

If the button is falling behind the carousel scroller, you can use CSS to change the height so that they don’t overlap, or try playing with z-index scores to make them stack in the right order..

Phil

Hi Phil,

Yes, that’s exactly what’s happened.

Is it possible to maybe move the button over so that it doesn’t overlap? If so, would this be in the CSS?

Or alternatively how would I begin the play with z-index scores to make them stack in the right order?

I’m not overly techy so I’d appreciate any help you might be able to give me ??

Thanks

So I think that z-indexes won’t work, due to the nesting of the elements (see this post).

You can budge the links right a bit easily enough though:

.carousel-caption .btn {
    margin-left: 300px;
}

To be honest, what I’d probably do myself is just get rid of the buttons at the side of the carousel. You can always have the little circles instead, or just nothing at all.

Phil

Hi Phil,

Thanks. I’ve just got rid of the buttons altogether now and have just put the link behind the image.

Thanks for your help anyway

Amy

Great, glad it’s sorted.

Phil