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:
- 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;
.
- 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. - Agora, somente como extra, eu irei apontar algumas mudanças que vão ajudar e muito na responsividade do seu projeto.
- 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. - Ainda no mesmo arquivo, mas na linha 142, procure os estilos da classe
.cabecalho__menu
e adicione a propriedade flex-wrap: wrap;
. - Continuando em
style.css
, mas na linha 149, nos estilos da classe .apresentacao
, adicione padding-bottom: 20%;
. - 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! ✓