Editando o código após a criação do repositório

Olá Ana! Tudo bem contigo?

Eu vou te guiar passo a passo sobre como fazer essa alteração diretamente no GitHub, sem precisar mexer com o Git.

1. Acessar o Repositório no GitHub: Primeiramente, acesse o seu repositório no GitHub através do navegador de internet. Certifique-se de estar logado na sua conta.

2. Localizar o Arquivo CSS: No seu repositório, procure pelo arquivo CSS que contém o código que você deseja alterar. Normalmente, ele estará dentro de uma pasta chamada "css", "styles" ou algo similar.

3. Editar o Arquivo CSS: Clique no nome do arquivo CSS para abri-lo. Você verá um botão no canto superior direito do arquivo que diz "Editar" ou um ícone de lápis que ao passar o mouse por cima dele uma pequena caixa aparece dizendo "Edit this file", depende da linguagem do seu computador/navegador. Clique nele. Isso abrirá um editor de texto onde você poderá fazer suas alterações.

4. Realizar a Alteração: Dentro do editor de texto, localize a parte do código CSS que deseja alterar. Faça as mudanças necessárias. Por exemplo, se você quer ajustar o tamanho de botões para que não quebrem no celular, pode ser necessário alterar propriedades como largura, altura, margens, etc.

5. Salvar as Alterações: Após fazer as alterações, desça até o final da página. Você encontrará um campo onde pode adicionar uma descrição para suas mudanças. Adicione uma breve descrição que explique o que foi alterado. Por exemplo: "Ajustes no tamanho dos botões para corrigir quebra no celular". Depois disso, clique no botão "Commit changes" ou similar para salvar suas alterações.

6. Visualizar as Alterações: Depois de salvar as alterações, você pode visualizar como elas afetaram o seu projeto clicando no botão "View Code" ou navegando até o seu site GitHub Pages (se você tiver configurado isso) ou na Vercel também.

Pronto! Agora você fez alterações diretamente no seu repositório GitHub sem precisar utilizar o Git localmente. As mudanças devem ser refletidas no seu projeto. Certifique-se de testar no celular para ver se resolveu o problema da quebra dos botões.

Era isso, se precisar eu estarei por aqui para ajudar!

Espero ter ajudado!

Abraços e bons estudos.

Entendi. Resolvi testar o código pelo VScode antes de alterar e onde pensei que estivesse o problema não alterou a quebra dos botões que é o que estou tentando consertar, pois não está se adaptando a telas de smartphone. O que devo fazer ? pode me ajudar, por favor?

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

    .cabecalho__menu {
        justify-content: center;
    }

    .apresentacao {
        flex-direction: column-reverse;
    }

    .apresentacao__conteudo {
        width: auto;
    }
}

Olá Ana! Tudo bem?

Nesse caso eu peço que me mande o seu código do GitHub para eu testar! Mas normalmente nesse caso, uma dica seria fazer isso:

1. Procure pela classe que contém a borda dos botões nas telas de Smartphone;
2. E altere a propriedade width para um tamanho maior, ou máximo, como, por exemplo: width: 100%, ou width: auto, width: 95%, etc.

Você testa os valores que acha melhor. Era isso.

Se precisar vou estar por aqui!

Abraços e sucesso nos estudos.

OLá Renan! Então, ja tinha visto algo sobre isso em algumas dúvidas de outros alunos e vídeos em outros sites mas nenhuma sugestão teve uma mudança realmente significativa, vou enviar aqui o código.

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,600;1,600&display=swap');

 :root {
    --cor-primaria: #000000; 
    --cor-secundaria: #72a98f; 
    --cor-terciaria: #8DE969 ;
    --cor-hover:#272727; 

    --fonte-primaria: "Krona One", sans-serif;
    --fonte-secundaria: "Montserrat", sans-serif;
}

 * {
    margin: 0;
    padding: 0;
}

body {
    /* height: 100vh; */
    box-sizing: border-box;
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
}

.cabecalho {
    padding: 2% 0% 0% 15.2%;
}

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

.cabecalho__menu__link {
    font-family: var(--fonte-secundaria);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cor-terciaria);
    text-decoration: none;
}

.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;
}

.apresentacao__conteudo__titulo {
    font-size: 2.25rem;
    font-family: var(--fonte-primaria);
}

.titulo-destaque {
    color: var(--cor-terciaria);
}

.apresentacao__conteudo__texto {
    font-size: 2.5rem;
    font-family:var(--fonte-secundaria);

}

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

.apresentacao__links__subtitulo {
    font-family: var(--fonte-primaria);
    font-weight: 400;
    font-size: 1.5rem;
}

.apresentacao__links__navegacao {
    /* background-color: #CBEF43; */
    display: flex;
    justify-content: center;
    gap: 16px;
    border: 2px solid var(--cor-terciaria);
    width: 50%;
    text-align: center;
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color:var(--cor-secundaria);
    font-family:var(--fonte-secundaria);
}

.apresentacao__links__link:hover {
     background-color: var(--cor-hover);
}

.apresentacao__imagem {
    width: 50%;
}

.rodape {
    padding: 15px;
    color: var(--cor-primaria);
    background-color: var(--cor-terciaria);
    text-align: center;
    font-family:var(--fonte-secundaria);
    font-size: 1.5rem;
    font-weight: 400;
}

.bordas {
    border-radius: 15% 15% 15% 15%;
}

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

    .cabecalho__menu {
        justify-content: center;
    }

    .apresentacao {
        flex-direction: column-reverse;
    }

    .apresentacao__conteudo {
        width: auto;
    }
}

Segue aqui o git tbm, desculpa estar enviando as informações incompletas. [https://github.com/anacfh/portifolio/tree/main/assets]

Olá Ana! Tudo bem?

De antemão já peço desculpas pela demora em obter um retorno!

Aqui estão as correções necessárias, elaboradas com base no código que me foi disponibilizado através do GitHub:

1. Arquivo style.css, linha 91, altere a propriedade:

   width: 50%;
   

   Para:

   width: 100%;
   

2. Ainda no arquivo style.css, no final do arquivo, pule uma linha e adicione isso:

   @media (min-width: 1200px) {
       .apresentacao__links__navegacao {
           width: 70%;
       }
   }
   

3. Era isso, essas alterações devem resolver o problema dos botões.

Peço novamente desculpas pela demora, mas está aí e se precisar é só chamar!

Abraços e bons estudos.

Bom dia, Renan! Está tudo tranquilo. Muito obrigada pelas respostas. Irei fazer as alterações. Pode deixar que qualquer duvida te chamo aqui. Tenha uma ótima semana.