Changing text size of lis does not work

Question

I have the site below:

http://funerariasaopedro.net.br/novo/

In it has a slider, at the top of the page. In this slider have a imagem (logo) and a ul (which contain some activities).

What happens is that when I reduce the size of the browser (screen resolution), everything follows. But the size of the image and the ul does not reduce although the size of the slide show reduce.

Yes, I did @media query.

@media screen and (min-width: 0px) and (max-width:1023px) {
    .cycle-slideshow .logo-atividades .logo{
        width:10% !important;
    }
    .cycle-slideshow .logo-atividades .atividades ul li a {
    font-size: .1rem !important;
    font-weight : auto  !important;
    line-height : auto !important;
    }
}

Answer 1

Edit

The problems of the spaces left to the right of the site I fixed by making a overflow-x:hidden html and body, and then putting box-sizing:border-box in the elements with the class .aos-item so their padding doesn’t interfere with the layout.

html, body {
    overflow-x: hidden;
}
.aos-item {
    display: inline-block;
    float: left;
    width: 50%;
    height: 300px;
    box-sizing: border-box;
    padding: 20px;
}

---

From what I’ve seen these CSS should solve the problem of alignment and logo size.

NOTE: You will have to make other variations of media @media to treat UL height on some screen widths .cycle-slideshow .logo-atividades .atividades Leave note in the code below.

.cycle-slideshow .logo-atividades {
    position: absolute;
    top: 0;
    left: 50%;
    max-width: 500px;
    height: 305px;
    text-align: center;
    overflow: hidden;
    z-index: 999;
    transform: translateX(-50%);
}

.cycle-slideshow .logo-atividades .atividades {
    position: absolute;
    top: 20%; /* aqui vc controla a altura da UL de acordo com a largura da tela*/
    width: 100%;
    height: 115px;
    overflow: hidden;
    pointer-events: none;
    text-align: center;
    z-index: 10;
    color: #FFF;
}

Now about the space that will remain on the right side is due to this JS that you used in their <sections>, so much so that after you put this CSS up and remove the sections you’ll see that the bug goes away

These elements with the AOS class that comes in from the right and left data-aos="fade-right" I believe that they are bugging the width of the screen and giving the white epaso at the top, remove them and the bug some tb...