Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

O projeto não está responsivo.

Referente ao curso HTML e CSS: trabalhando com responsividade e publicação de projetos, no capítulo Repositório do GitHub e atividade Projeto final do curso

por Guilherme Marinho Pereira
| 46.3k xp | 4 posts

O cabeçalho não está sendo ajustadoO rodapé também não

Segue meu código CSS:

@media (max-width: 1200px){
    .cabecalho{
        padding: 10%;
    }
    .cabecalho__menu{
        justify-content: center;
    }

    .apresentacao{
        flex-direction: column-reverse;
        padding: 5%;
    }

    .apresentacao__conteudo{
        width: auto;
    }
}   
as mesmas classes, mas fora do @media: 
.cabecalho{
    padding: 2% 0% 0% 15%; 
} 
.cabecalho__menu{
    display: flex;
    gap: 40px;
} 
.apresentacao{
    padding: 5% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 82px;
} 
.apresentacao__conteudo{
    width: 50%; 
    display: flex;
    flex-direction: column;
    gap: 40px;  
}

Link do Vercel: https://portfolio-dmpv5k82g-guimarinho03.vercel.app

5 respostas
por GABRIEL DUPLA
| 683.4k xp | 1662 posts
Pessoa Monitora Fórum Ops

Opa Guilherme, tudo certo?

A responsividade vai depender das resoluções que estamos trabalhando, sendo assim, poderia por gentileza informar qual a resolução do dispositivo que está utilizando? Ademais, considere compartilhar o link do seu repositório no github deste projeto, desta forma poderei te auxiliar de forma mais assertiva.

Fico à disposição.

Tenha um bom dia e bons estudos.

por Guilherme Marinho Pereira
| 46.3k xp | 4 posts

O web funciona corretamente, mas na hora de testar o mobile fica como nas imagens acima, o cabeçalho e o rodapé não ficam corretamente.

Testei em um Iphone XR (1792x828 pixels) e em um Iphone 13(2532x1170 pixels).

Segue o link do repositório: https://github.com/GuiMarinho03/portfolio

por GABRIEL DUPLA
| 683.4k xp | 1662 posts
Pessoa Monitora Fórum Ops

Opa Guilherme.

Testei o projeto projetando para um Iphone XR.

O problema em questão está relacionado ao “cabecalho__menu”. Para a versão desktop, usamos do gap para separar os elementos, porém, projetamos a distância entre os itens pensando no tamanho da tela do computador, sendo que ao projetar na versão mobile, o conteúdo estoura. Uma possível solução é diminuir a propriedade gap no medie querie do celular: 

.cabecalho__menu{
        justify-content: center;
        gap: 25px;
}

Um ponto importante é que por padrão, os flex items vão todos tentar se encaixar em uma só linha. Como seu projeto possui 4 elementos no menu, usei a propriedade flex-wrap para organizá-los, deixando 3 itens na primeira linha e 1 na segunda. Essa propriedade permite que os itens quebrem para uma linha seguinte conforme for necessário.

.cabecalho__menu{
        justify-content: center;
        gap: 25px;
        flex-wrap: wrap;

}

O rodapé, no entanto, pelo que pude perceber, estava ocupando todo o conteúdo disponível, porém, pela quebra do cabeçalho ocorreu do rodapé não abranger até onde o conteúdo do cabeçalho estava sendo destinado.

Se precisar de ajuda ou tiver alguma dúvida, estou à disposição, conte comigo!

Tenha um bom dia e bons estudos.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓
por Guilherme Marinho Pereira
| 46.3k xp | 4 posts

E como posso fazer para deixar um espaço entre cada elemento? Tanto na versão web como na mobile os elementos do cabeçalho estão "colados" um no outro Versão WebVersão MobileO código está como você fez

.cabecalho__menu{
        justify-content: center;
        gap: 25px;
        flex-wrap: wrap;

}
solução!
por GABRIEL DUPLA
| 683.4k xp | 1662 posts
Pessoa Monitora Fórum Ops

Opa Guilherme.

Peço desculpas pela falta de clareza no resposta anterior.

A respeito do .cabecalho__menu do desktop, não haverá alterações, precisamos que o cabeçalho se mantenha com o display flex para podermos atribuir a propriedade gap, reponsável pelo espaçamento dos itens:

.cabecalho__menu{
    display: flex;
    gap: 80px;

}

Alteraremos apenas o responsivo do mobile, ou seja, modificaremos apenas o que está dentro do media querie:

@media (max-width: 1200px){ /* Funciona como se fosse uma condição */
    .cabecalho{
        padding: 5%;
    }

    .cabecalho__menu{
        justify-content: center;
    
    }

Acrescentaremos na classe do media querie as alterações do cabeçalho para que elas sejam aplicadas somente quando mudarmos para a versão mobile do projeto:

@media (max-width: 1200px){ /* Funciona como se fosse uma condição */
    .cabecalho{
        padding: 5%;
    }

    .cabecalho__menu{
        justify-content: center;
        gap: 25px;
        flex-wrap: wrap;
    }

Espero ter ajudado, qualquer dúvida fico à disposição.

Tenha um bom dia e bons estudos.