Change size of lis text does not work

Question

Change size of lis text does not work

Navigation

#1 by (1 votes)

1

I have the site below:

It has a slider at the top of the page. In this slider I have a imagem (logo) and a ul (which contains some activities).

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

Yes, I did the @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;
    }
}

css css3

asked by anonymous 24.04.2018 / 20:42

1 answer

Error counting values repeated in a vector Query JQuery-Ajax Laravel 5.5

score 1 · Accepted Answer

Edit

The problems of spaces on the right side of the site I've corrected by doing a overflow-x:hidden in the html and body, and then putting box-sizing:border-box in the elements as class .aos-item so their padding does not 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 the size of the logo.

NOTE: You will have to make other variations of the average quary @media to treat the height of the UL in 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 left over from the right side is due to this JS that you used in your <sections> , so much so that after you put that CSS up and remove the sections you will see that the bug some

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