Boa noite. Ao fazer as atualizações do arquivo alura play, no css, salvei e atualizei a página, mas o menu na vertical ainda continua reduzido e a barra de rolagem vertical não apareceu. Alguém pode me ajudar com este problema?
Boa noite. Ao fazer as atualizações do arquivo alura play, no css, salvei e atualizei a página, mas o menu na vertical ainda continua reduzido e a barra de rolagem vertical não apareceu. Alguém pode me ajudar com este problema?
Boa noite, Jéssica! você poderia mandar o código para ter um entendimento melhor sobre seu problema? Por favor
Segue o arquivo css
/CABECALHO/
.cabecalho__container { display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; } .cabecalho__pesquisar__item { display: none; }
/MENU/
.menu__container { position: fixed; bottom: 0%; height: 74px; width: 100%; }
.menu__lista { display: flex; justify-content: space-around; height:100%; }
.menu__lista li { align-self: center; }
.menu__itens { display: flex; flex-direction: column; gap: 5px; }
.menu__lista:nth-child(2), .menu__lista:nth-child(3), .menu__lista:nth-child(4) { display: none; }
/SUPERIOR SEÇÃO/
.superior__secao__container { display: flex; align-items: center; white-space: nowrap; overflow: scroll; gap: 15px; }
/RODAPE/
.rodape__container { display: flex; /* flex-direction: column; flex-wrap: wrap; */ flex-flow: column wrap; }
@media (min-width: 834px) {
/CABECALHO/
.cabecalho__pesquisar__item {
display: block ;
}
/RODAPE/
.rodape__container {
justify-content: space-between;
}
/MENU LATERAL PARA TELAS DE TABLET/
.menu__container {
left: 0;
height: auto;
width: 74px;
top: 80px;
}
.menu__lista {
flex-direction: column;
justify-content: flex-start;
padding-top: 15px;
gap: 33px;
}
@media(min-width: 1440px) { .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 { height: auto; padding: 20px 17px 20px 15px; gap: 15px; }
.menu__itens { flex-direction: row; gap: 15px; align-items: center; }
.menu__lista:nth-child(3) { flex-direction: column-reverse; }
.jogos { order: 3; }
.films { order: 2; }
.premium { order: 1; }
.maispagina { order: 4; } }
Bom dia, Jéssica! Tudo bem?
Então, percebi que no seu código CSS, quando você faz o ajuste para telas maiores que 1440px, o .menu__container realmente muda de largura, mas está faltando definir a altura e o overflow para que a rolagem apareça corretamente.
Tenta adicionar essas propriedades dentro do @media (min-width: 1440px):
.menu__container {
width: 239px;
height: calc(100vh - 80px);
top: 80px;
overflow-y: auto;
position: fixed;
}
Além disso, verifica se essas listas dentro do menu estão visíveis quando chega na largura de 1440px:
.menu__lista:nth-child(2),
.menu__lista:nth-child(3),
.menu__lista:nth-child(4) {
display: flex;
}
Espero ter ajudado, qualquer problema que der pode mandar mensagem aqui de novo.
Agradecida.
De nada.