Oi Pessoal,
Segue o meu projeto na Vecel,
estou pedindo o feedback de como melhorar, o que errei, etc.
Tive receio de compartilhar, mas aqui vai.
Semana que vem tem um projeto melhor.
Oi Pessoal,
Segue o meu projeto na Vecel,
estou pedindo o feedback de como melhorar, o que errei, etc.
Tive receio de compartilhar, mas aqui vai.
Semana que vem tem um projeto melhor.
Documentação sobre media querys https://developer.mozilla.org/pt-BR/docs/Web/CSS/Media_Queries/Using_media_queries
No próprio curso em questão tem algo sobre. Recomendo postar na vercel apenas quando estiver tudo ok.
Estranho, segui o curso e coloquei a media query, vou rever.
Usei o seguinte, como indicado, será que tem algum erro?
@media (min-width: 1000px) {
.cabecalho {
padding: 10% 10% 5% 10%;
}
.cabecalho__menu {
justify-content: center;
}
.apresentacao__imagem {
max-width: 50%;
}
.apresentacao {
flex-direction: column;
align-items: center;
flex-direction: column-reverse;
}
.apresentacao__conteudo {
width: auto;
}
.apresentacao__links__subtitulo{
font-weight: 400;
font-size: 2rem;
}
Quando você começa desenvolver um projeto, você tem 2 pensamentos. Você irá começar desenvolver pra dekstop ou mobile primeiro.
O min-width é usado para aplicar estilos quando a largura da tela é igual ou maior que o valor definido na media query. Geralmente, o min-width é usado para criar estilos para dispositivos maiores, como desktops, tablets ou smartphones com tela grande em modo paisagem.
Por exemplo, a seguinte media query aplica estilos para telas com largura igual ou maior que 1000 pixels:
@media screen and (min-width: 1000px) {
/* Estilos aqui */
}
Já o max-width é usado para aplicar estilos quando a largura da tela é menor ou igual ao valor definido na media query. Geralmente, o max-width é usado para criar estilos para dispositivos menores, como smartphones com tela pequena ou tablets em modo retrato.
@media screen and (max-width: 767px) {
/* Estilos aqui */
}
Portanto, a escolha entre min-width ou max-width dependerá do tipo de dispositivo que você deseja atingir e quais estilos você deseja aplicar.
Ou seja o projeto em questão você quer dar responsividade pra mobile então o uso certo é MAX-WIDTH