when I start writing media query I get some problem with the class under slider?

Hi @johannes999

It doesn’t seem to happen because of the dots, but the element under the slideshow which has negative top margin:

@media (min-width: 180px) and (max-width: 279.9999px){
.box {
    box-sizing: inherit;
    border: 0.01 solid #4b5054;
    background-color: #4b5054;
    /* background-color: red; */
    width: 100%;
    height: 100px;
    margin-top: -0.3rem;
    max-width: 1920px;
    display: flex;
    flex-direction: column;
}
}

that pulls this element over the slideshow. So I’d suggest to deal with this “box” element and remove its negative margin.

Negative margins can cause quite odd things so perhaps the best would be eliminating all negative margins and using a different approach to do this. For example, you could put the dots in absolute position (and make the slideshow have relative position) so you could align the dots to the bottom of the slideshow container. You could use flexbox for centering:

.slideshow-container{
    position: relative;
    display: flex;
    justify-content: center;
}
#figure {
    position: absolute;
    bottom: 0;
}

And make sure you remove the top margin from the .box element.

thank you very much ,

you solved for me big problem I would never could think about it .

thanks again