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

O width não funciona

segui todo o passo a passo e o códigocodigo está igual, porém o width nos links não funciona nem como porcentagem nem como pixel, e antes de usar o gap as bordas azuis estavam ficando em cima do texto. E meu projeto parece ocupa grande parte da página. Não sei como resolver! Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Vou deixar aqui o link da pasta drive com o projeto completo para que possam visualizar melhor. Já revisei tudo e não achei erro.

https://drive.google.com/drive/folders/18IVT2ceZC-NKQfRdMPhaPih9CwO6MEew?usp=share_link

1 resposta
solução!

No seu código HTML, você tem um erro de digitação na classe da div que contém os links, faltando uma aspas dupla no final. Para corrigir, basta adicionar a aspas dupla no final, assim: no seu código tem um > ao final da classe.

HTML

<div class="apresentacao__links">
    <a class="links" href="https://www.instagram.com/lara_krumma/">Instagram</a>
    <a class="links" href="https://docs.google.com/spreadsheets/d/1smG-SM3DzWtWWpeTsWfvW1uG-lGvDoDDf0EU_MC-8ls/edit#gid=1937703626"> Github </a>
</div>

Tente usar como porcentagem o Widht, já que você está trabalhando com flex

width: 50%

Já no seu código CSS, para ajustar o width dos links, você pode utilizar a unidade de medida "rem" em vez de "%" ou "px", já que essa unidade é relativa ao tamanho da fonte definida no elemento pai, o que torna mais fácil de ajustar a largura em relação ao texto. Por exemplo:

.links {
    background-color: #22D4FD;
    width: 16rem;          /*OU USE COMO PORCENTAGEM MESMO PORÉM 50% VAI FAZENDO OS TESTES*/
    text-align: center;
    border-radius: 16px;
    font-size: 24px;
    font-weight: 600;
    padding: 10px 20px; /* ajuste os valores conforme desejar */
    text-decoration: none;
    color: #000000;
    font-family: 'Montserrat', sans-serif;
}

Resoluções mais usadas pra Dekstop

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

Resoluções mais usadas pra Mobile Insira aqui a descrição dessa imagem para ajudar na acessibilidade ** Referência: https://gs.statcounter.com/ LEMBRE-SE SEMPRE QUE O LAYOUT APARECE PRA VOCÊ DE ACORDO COM A RESOLUÇÃO DE SEU MONITOR.

Espero ter ajudado

Meu Github: Gustavo Araujo