Pessoal,
Não sei se aconteceu o mesmo com vocês... porém após iniciarmos com a aplicação dos media query (@media) o meu código não rodou mais... pensei que pudesse ser que o meu PC não tivesse 1040px de largura. Inclusive, baixei o projeto final do curso mas mesmo assim não rodou no meu PC.
Alguém passou por alguma situação parecida? Se sim, conseguiu resolver?
Abs,
coloca o css que vc usou
@media screen and (min-width: 1440px) { .cabecalho { background-color: #1D232A; display: grid; column-gap: 32px; grid-template-columns: 1fr auto; padding: 16px 60px; height: 80px; box-sizing: border-box; grid-column: 2; }
Estou deixando só o @media pois o CSS ultrapassa o limite de 5.000 caracteres.
@media screen and (min-width: 1440px) { .principal { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "titulo-pagina titulo-pagina titulo-pagina" "destaque-video destaque-video videos-recentes" "secao-videos secao-videos secao-videos" "produtos-recentes destaque-produtos destaque-produtos" "secao-produtos secao-produtos secao-produtos" ; column-gap: 32px; padding: 16px 60px; grid-column: 2; }
@media screen and (min-width: 1440px) { .cartao--destaque { margin-bottom: 0; }
.cartao__imagem--mobile {
display: none;
}
.cartao__imagem--desktop {
display: block;
}
.cartao__botao--destaque {
grid-column: auto;
padding: 16px 8px;
}
.cartao--recentes {
display: grid;
grid-template-columns: auto auto;
align-items: center;
row-gap: 24px;
width: 256px;
padding: 16px;
box-sizing: border-box;
align-self: flex-start;
}
.cartao--recentes .cartao__titulo {
grid-column: auto;
}
.cartao__link {
font-size: 0.8rem;
font-weight: 600;
color: #0480DC;
justify-self: flex-end;
}
.cartao__lista {
display: grid;
row-gap: 16px;
grid-column: span 2;
}
.cartao__item {
display: grid;
grid-template-columns: auto 1fr;
gap: 8px;
}
.cartao__item-thumbnail {
width: 32px;
grid-row: span 2;
}
.cartao__item-titulo {
font-size: 0.9rem;
line-height: 1.2rem;
font-weight: 700;
}
.cartao__item-perfil {
font-size: 0.8rem;
color: #95999C;
}}
@media screen and (min-width: 1440px) { .secao { grid-template-columns: repeat(4, 1fr); }
.destaque-video {
grid-area: destaque-video;
}
.videos-recentes {
grid-area: videos-recentes;
}
.secao-videos {
grid-area: secao-videos;
}
.destaque-produtos {
grid-area: destaque-produtos;
}
.produtos-recentes {
grid-area: produtos-recentes;
}
.secao-produtos {
grid-area: secao-produtos;
}}
Se não funcionou com o css do projeto, provavelmente o problema esteja em outro lugar. Pode ser que o nome de alguma classe esteja diferente no html e no css. pode estar faltando um "-", ou um caractere estar em maiúsculo em arquivo e minúsculo em outro, etc.