fiz o upload mas no celular tem algum problema. | HTML e CSS: trabalhando com responsividade e publicação de projetos

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Meu portifolio fica com os botoes do rodapé quebrado na versão mobile. Como resolvo isso?

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@900&family=Libre+Baskerville&family=Pixelify+Sans&family=Playfair+Display&family=Roboto&family=Satisfy&display=swap'); { margin: 0% 0%; padding:0; } body{ / height: 100vh; */ box-sizing: border-box; width: 100%; padding: 0px; background-color: #000000; color: #FFFFFF; }

.destaque{ color: #1285DC; }

.cabecalho { padding: 2% 0% 0% 10%; background-color: #00002E; }

.cabecalho__menu { display: flex; gap: 75px;}

.cabecalho__links { background-color: #000000; border: 2px groove #D98752; font-family: 'Playfair Display', sans-serif;; width: 120px; text-align: center; border-radius: 4px; font-size: 1rem; font-weight: 650; text-decoration: none; color: #FFFFFF; }

.cabecalho__links:hover { background-color: #545454; border-radius: 10px; font-size: 1rem; }

.apresentacao{ padding: 5px 100px; background-color: #000000; display: flex; align-items: center; justify-content: space-between; }

.apresentacao__conteudo { width: 50%; display: flex; flex-direction: column; }

.apresentacao__titulo { font-size: 2.25rem; font-family: 'Playfair Display', serif;; text-align: center; }

.apresentacao__paragrafo { font-size: 1.375rem; font-family: 'Libre Baskerville', sans-serif;; text-align: left; }

.apresentacao__links { display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 7px; }

.apresetacao__subtitulo { font-family: 'Playfair Display' , serif;; font-weight: 400; text-align: center; }

.apresentacao__botao1 { background-color: #ffffff; border: 2px groove #FFFFFF; width: 50%; text-align: center; border-radius: 4px; font-size: 1.43rem; font-family: 'Satisfy', sans-serif;; text-decoration: none; color: #000000; }

.apresentacao__botao2 { background-color: #ffffff; border: 2px groove #000000; width: 50%; text-align: center; border-radius: 4px; font-size: 1.43rem; font-family: 'Kanit', sans-serif;; text-decoration: none; color: #000000 }

.apresentacao__botao3 { background-color: #ffffff; border: 2px groove #000000; width: 50%; text-align: center; border-radius: 4px; font-size: 1.43rem; font-family: 'Lexend' , sans-serif; text-decoration: none; color: #000000 }

.apresentacao__botao1:hover { background-color: #545454; border-radius: 10px; font-size: 1.43rem; }

.apresentacao__botao2:hover { background-color: #545454; border-radius: 10px; font-size: 1.43rem; }

.apresentacao__botao3:hover { background-color: #545454; border-radius: 10px; font-size: 1.43rem; }

.rodape { padding: 1%; background-color: #00002E; color: #FFFFFF; font-size: 1rem; font-family: 'Libre Baskerville', sans-serif;; text-align: center; } .img__index { width: 50%; }

.img__about { width: 50%; }

.img__curriculo { width: 50%; }

.img__icone { width: 20px; height: 23px; }

.apresentacao__botao__certificados { background-color: #ffffff; border: 2px groove #000000; width: 50%; text-align: center; border-radius: 9px; font-size: 1.25rem; font-family: 'Roboto', sans-serif;; text-decoration: none; color: #000000; }

.apresentacao__botao__certificados:hover { background-color: #545454; border-radius: 12px; font-size: 1.25rem; }

.img__certificado { width: 50%; }

@media (max-width: 1200px) { .cabecalho{ padding: 10%; } .cabecalho__menu { justify-content: center; } .apresentacao{ flex-direction: column-reverse; padding: 5%; } .apresentacao__conteudo{ width: auto; } }

Olá, Misael!

Pelo que entendi, você está com um problema na versão mobile do seu portfólio, mais especificamente com os botões do rodapé que estão quebrados. Vou te ajudar a resolver isso!

Analisando o código que você compartilhou, percebi que você está utilizando uma estrutura de CSS para estilizar seu portfólio. Para corrigir o problema dos botões quebrados na versão mobile, você pode adicionar uma regra de mídia para ajustar o layout nessa resolução.

Dentro da regra de mídia @media (max-width: 1200px), que você já possui no seu código, você pode adicionar algumas alterações para corrigir o problema. Por exemplo, você pode definir a largura dos botões do rodapé para 100% e ajustar o espaçamento entre eles.

Aqui está um exemplo de como você pode fazer isso:

@media (max-width: 1200px) {
  .rodape {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .rodape__botao {
    width: 100%;
    margin-bottom: 10px;
  }
}

Nesse exemplo, estou utilizando a classe .rodape__botao para estilizar os botões do rodapé. Defini a largura para 100% e adicionei um espaçamento inferior de 10px entre eles.

Lembre-se de substituir .rodape__botao pelo seletor correto dos botões do seu código.

Após adicionar essas alterações, teste novamente o seu portfólio na versão mobile e verifique se os botões estão sendo exibidos corretamente.

Espero que essa solução te ajude a resolver o problema! Se tiver mais alguma dúvida, é só me dizer. Espero ter ajudado e bons estudos!