Já tive que fazer ajustes no media queary para eu conseguir visualizar, pois meu monitor é menor do que o do video, mas agora estou com este problema e não sei como resolver.
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!
Já tive que fazer ajustes no media queary para eu conseguir visualizar, pois meu monitor é menor do que o do video, mas agora estou com este problema e não sei como resolver.
Oi, Claudio! Tudo certo?
Você pode me passar o seu código, por favor? Assim posso te ajudar com mais eficiência. =)
Abraços!
/*HEADER*/
.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;
}
/* SEÇÃO SUPERIOR */
.superior__secao__container{
display: flex;
align-items: center;
white-space: nowrap;
overflow: scroll;
gap: 15px;
}
/* .superior__item{
margin-right: 15px;
}
.superior__item:last-child{
margin-right: 0px;
} */
/* VIDEO */
.videos__container{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.videos__item{
height: 303px;
width: 280px;
flex-grow: 1;
}
/* DESCRIÇÃO VIDEOS */
.descricao-video {
margin-top: 1rem;
display: grid;
text-align: start;
column-gap: 1rem;
row-gap: 10px;
grid-template-columns: auto 1fr;
}
.descricao-video img {
grid-area: 1 / 1 / 3 / 2;
}
.descricao-video h3 {
grid-area: 1 / 2 / 2 / 3;
font-weight: 700;
color: #444444;
}
.descricao-video p {
grid-area: 2 / 2 / 3 / 3;
font-size: 14px;
color: #444444;
}
/*FOOTER*/
.rodape__container {
display: flex;
/*flex-direction: column;
flex-wrap: wrap;*/
flex-flow: column wrap; /* shortcut */
}
@media (min-width: 834px){
/* HEADER */
.cabecalho__pesquisar__item{
display: block;
}
/* FOOTER */
.rodape__container{
justify-content: space-between;
}
/* MENU */
.menu__container{
left: 0;
height: auto;
width: 74px;
top: 80px;
}
.menu__lista{
flex-flow: column;
justify-content: flex-start;
padding-top: 15px;
gap: 33px;
}
}
@media(min-width: 1240px) {
.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-self: center;
}
.superior__secao__container{
left: 240px;
}
.menu__lista:nth-child(3) {
flex-direction: column-reverse;
}
.jogos{
order: 3;
}
.filmes{
order: 2;
}
.premium{
order: 1;
}
.maispagina{
order: 4;
}
}
Poderia por gentileza em enviar o seu projeto completo? Dessa forma posso analisar o seu código na totalidade e simular o problema para ajudá-lo de forma mais assertiva.
Você pode compartilhar o link do seu projeto via Github.
Fico à disposição.
Tenha um bom dia e bons estudos.
Oi, Claudio! Tudo bem?
Como você expandiu uma seção diferente, a outra ficou sobreposta.
Para equivaler ao que o instrutor passou no curso, recomendo que você adicione no @media query a propriedade margin-left, dentro de um container para os vídeos. Ficando desta forma:
.videos__container {
margin-left: 239px;
}E assim o projeto ficará certinho.
Se outra dúvida surgir, estou disponível.
Abraços e bons estudos!