Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Ajuda projeto portfólio - erro no footer e imagens fora do lugar

Oi gente, fiz o deploy do projeto Portfólio mas estou com dois problemas: o footer está subindo na página créditos quando aberto no mobile e o botão de home não fica vísivel. Já quando é aberto no pc as imagens do Home e Sobre mim estão em alturas diferentes, vi esse mesmo erro da imagem no projeto de outras pessoas também. Alguma sugestão?

Preview do projeto portfólio de Joana Tavares

1 resposta
solução!

Olá Joana! Tudo bem contigo?

Bom, antes de continuar, devo informar que alguns dos problemas relatados eu não consegui visualizar no seu Deploy, mas vou tentar ajudar com base no que está no deploy e pelo código do GitHub:

  1. Para resolver o problema do footer, você pode fazer essa alteração:
    • No aquivo style.css linha 124, você deve achar os estilos da classe .rodape e deve mudar position: static; para position: fixed;.
  2. Sobre o problema com as imagens, esse eu não consegui visualizar no deploy, mas pelos estilos que vi você já arrumou isso, mas de toda forma, se você definisse um height para eles, que é a propriedade de altura do CSS você pode controlar o tamanho vertical de qualquer coisa, e width controla o tamanho horizontal.
  3. Agora, somente como extra, eu irei apontar algumas mudanças que vão ajudar e muito na responsividade do seu projeto.
    1. No arquivo style.css linha 70, procure os estilos da classe .apresentacao__conteudo__texto e adicione a propriedade line-break: anywhere; nos estilos, isso vai ajudar na quebra de linha dos textos, e consequentemente melhorar a visualização dos itens.
    2. Ainda no mesmo arquivo, mas na linha 142, procure os estilos da classe .cabecalho__menu e adicione a propriedade flex-wrap: wrap;.
    3. Continuando em style.css, mas na linha 149, nos estilos da classe .apresentacao, adicione padding-bottom: 20%;.
    4. Ainda em style.css adicione isso no arquivo de estilos em algum lugar fora da media-querie:
          .apresentacao__conteudo > ul {
              margin-left: 1rem;
          }
      

Era isso, isso conclui tudo.

Se precisar de algo, ou tiver alguma dúvida é só me chamar.

Abraços e bons estudos.

Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓