4
respostas

Meu primeiro Projeto no Vecel - Juda com responsividade /mobile

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.

https://first-project-vert.vercel.app

4 respostas

Sobre mim ainda com lorem ipsum

imagem do portfolio

Falta de media query: responsividade mobile

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeDocumentaçã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;    
}

Pensa assim

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:

CSS

@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.

Por exemplo, a seguinte media query aplica estilos para telas com largura menor ou igual a 768 pixels:

@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