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?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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.