'css Z-Index not working on mobile and smaller screen

I have a couple of items with stuff in it. I can go through it using a dot navigation system. I want the dots to be shown in all items, except the first one. I did this with the following code:

    .Quiz-carousel .carousel_item:nth-child(1) .owl-dots{
        z-index: -2 ;
    }

This works perfectly on my laptop screen, but whenever I make my screen smaller and reload the dots do not appear and when I try it on mobile the dots are everywhere (also on the first page). Does anybody know how I can make it work on all devices?

btw It's z-index -2 cause the items are already -1

cssmobilecss-selectorsz-index


Solution 1:[1]

Without seeing the code, my guess would be that it's something to do with either the positioning of the content or the content doesn't have a height. If you're displaying the dots in CSS, they need a width AND a height for them to show up, since a tag that doesn't have content will just have a height of 0.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Austin Caron

Related Questions