3
respostas

menu__superior__container

olá pessoal,

A minha tela quando está aberta em 1341px o menu superior se sobrepõe ao aside e eu nao estou conseguindo resolver. Já mexi no padding, na margem, no position e nada!

Vou enviar o meu codigo tambem.

Se puderem me ajudar, eu agradeço .

3 respostas

Fala, Rodrigo! Tudo bom com você?

Provavelmente tem alguma coisa relacionada com o width dos containers. Verifica as proporções deles pra ver se acha o que pode estar causando esse problema. Se quiser, pode mandar o código aqui também, pra gente dar uma olhada melhor.

Abraços!

Bom dia, professor,

Segue o código... .cabecalho__container{ display: flex; justify-content: space-between; align-items:center ; position: fixed; top: 0px; } .cabecalho__pesquisar__item{ display:none }

.rodape__container{ display: flex; flex-direction: column; flex-wrap: wrap; }

/* Secao superior */ .superior__secao__container{ display: flex; align-items: center; gap: 5px;

} /* VIDEO */ .videos__item{ height: 303px; width: 280px; flex-grow: 1; }

.videos__container{ display: flex; flex-wrap:wrap; gap: 10px;

}

.menu__container{ position: fixed; bottom: 0%; height: 74px; width: 100%; }

.menu__lista { display: flex; justify-content: space-around; } /* Space around, aspacw between*/

.menu__lista{ align-self: center;

}

.menu__itens{ display: flex; flex-direction: column; gap: 5px; }

/* Alinhando os elementos no centro do container */

.menu__lista:nth-child(2), .menu__lista:nth-child(3), .menu__lista:nth-child(4) { display: none; }

@media(min-width:834px){

    .cabecalho__pesquisar__item{
        display:block;}

        .superior__secao__container{
            gap: 5px;
            white-space: nowrap;
            overflow: scroll;

        }

    .rodape__container{
        justify-content: space-between;

    }

    .menu__container{
        position: fixed;
        height: 100%;
        width: 75px;
        top: 80px;
    }

    .menu__lista{
        flex-direction: column;
        gap: 30px;
        justify-content: flex-start;
        
    }


    /* OPINIAO DO PROFESSOR: .menu__lista {
flex-direction: column;
justify-content: flex-start;
padding-top: 15px;
gap: 33px;

} */

}

    @media(min-width:1341px){
        .menu__container{
            width: 239px;
            overflow: scroll;}

            
        }

        .menu__lista:nth-child(2),
        .menu__lista:nth-child(3),
        .menu__lista:nth-child(4) {
            display: flex;
            

}

.menu__lista{ padding: 20px 17px 20px 15px; gap:15px; }

.menu__lista:nth-child(3){ flex-direction: column-reverse; }

.jogos { order: 3; }

.filmes { order: 2; }

.premium { order: 1; }

.maispagina { order: 4; }

.menu__itens{ flex-direction: row; gap: 15px; align-items: center; }

Fala, Rodrigo, bom dia! Tudo bom, certo?

Cara, eu não consegui ver muito bem o que pode ser o problema ainda. Se tiver como, pode deixar o link pro repositório do seu projeto aqui pra gente dar uma olhada? Ou, se preferir, pode mandar os aquivos pro meu email mesmo (iurygon.silva@gmail.com), que aí eu dou uma olhada.

Abraços!