Carousel indicators problem

Hi there,

It’s very difficult to know without seeing the web page that they’re on. Do you have a link where I can see the carousel for real?

Phil

I have it on my test wp page which is not for public.

Can I send you in the private mail?

Better would be to try to replicate the problem on codepen or something if possible..

Otherwise you can find my contact details from my website (listed on my WP profile page).

Phil

Ok, having seen your site, it’s due to overlapping CSS styles from your custom stylesheet:

.post-content li {
    margin-bottom: 1.3em;
}
[..and others..]

You can either change these styles to be more specific, or (probably easier) make new styles to specifically set the carousel back to its default:

.carousel ol.carousel-indicators .li {
    margin: 1px;
}
.carousel ol.carousel-indicators .li:active {
    margin: 0;
}

For anyone with similar problems in the future, you can figure this out by using the Chome Inspector (or equivalen in other browsers) to look at the CSS rules being applied to whatever is wrong. There you can see which rules are being applied, in what order, from what source. Un-ticking various rules to disable them updates the page, so you can find what’s causing the problem.

Phil

Thank you Phil!

It works