7
respostas

[Dúvida] 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 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

7 respostas

Opa Lara, tudo bem?

Pelo que pude observar do seu código está tudo certinho, apenas a classe descrita na aula e colocada na tag era .apresentacao__links__link e está escrita como links, para que eu possa te ajudar de forma mais assertiva, peço que por gentileza compartilhe o link do seu projeto conosco, seja pelo GitHub ou os arquivos no Drive.

Fico à disposição.

Tenha um bom dia e bons estudos.

Boa tarde Lara, acredito que esteja faltando a classe .apresentacao_links.

apresentacaolinks

Imagem do portfolio

HTML

            <div class="apresentacao__links">
                <h2 class="apresentacao__links__titulo">Acesse minhas Redes</h2>
                <a class="apresentacao__links__navegacao" href="https://github.com/onedreamcwb" target="_blank">
                    <img src="/images/github.png" alt="logo Github">GitHub</a>
                <a class="apresentacao__links__navegacao" href="https://www.linkedin.com/in/ga20222/" target="_blank"><img src="/images/linkedin.png" alt="logo Linkedin">Linkedin</a>
                <a class="apresentacao__links__navegacao" href="https://mobile.twitter.com/AraujoCwb23" target="_blank"><img src="/images/twitter.png"alt="logo twitter">Twitter
                </a>
            </div>

CSS

.apresentacao__links {
    display: flex;
    flex-direction: column;      /*VEJA QUE COLOQUEI O FLEX DIRECTION EM COLUNA JUSTAMENTE PRA HAVER A QUEBRA*/
    align-items: center;             /*ALINHE OS ITENS NA SECTION */
    gap: 32px;                                 /*ESPAÇAMENTO ENTRE OS LINKS */
    justify-content: space-between;
}

/*FALTA DO TITULO DOS LINKS DAS REDES*/
.apresentacao__links__titulo {
    font-family: var(--fonte-primaria);
    font-weight: 400;
    font-size: 1.5rem;

}

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

}

Veja que o Width não está em pixel e sim em porcentagem

O elemento "apresentacao__links__navegacao" dentro deste container é exibido como um container flex com elementos justificados ao centro, com uma lacuna de 16 pixels entre eles e com uma largura de 50% do container pai. Ele tem uma borda com um raio de 8 pixels e uma largura de 2 pixels, com uma cor definida como a variável CSS "--cor-terciaria". A fonte usada para este elemento é definida como a variável CSS "--fonte-secundaria" com um peso de fonte de 600 e um tamanho de 1.5rem. Também tem preenchimento de 21.5 pixels na parte superior e inferior do elemento e não tem decoração de texto. A cor do texto é definida como #f6f6f6 (branco) para garantir a legibilidade.

Este trecho de código CSS define as regras de estilo para um elemento com a classe "apresentacao__links" e seus descendentes. O elemento principal é exibido como um container flex com direção de coluna, alinhado ao centro dos elementos, com uma lacuna de 32 pixels entre eles e com o espaço restante entre os elementos.

O elemento "apresentacao__links__titulo" dentro deste container tem sua fonte definida como a variável CSS "--fonte-primaria" com um peso de fonte de 400 e um tamanho de 1.5rem.

Espero ter ajudado!

Meu GitHub: https://github.com/onedreamcwb

As repostas infelizmente não me ajudaram muito, vou deixar aqui o link da pasta drive com os arquivos para que possam ver o arquivo completo.

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

Consegue mandar o código por aqui mesmo?

é só copiar toda linha de html e css e mandar aqui

para ficar melhor a compreensão você pode abrir a linha de código especificando a linguagem Insira aqui a descrição dessa imagem para ajudar na acessibilidade

<h1> Exemplo </h1>

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

Nós usamos muito servidor do discord também lá tem a sala de estudos front end onde você pode sempre entrar lá e stremar sua tela pra ficar melhor compreensão

Oi Lara, como vai?

Analisei seu código e pude perceber dois empecilhos para que os botões fossem estilizados:

  • No HTML a classe de apresentação dos links está com um símbolo de maior no nome da classeclass="apresentacao__links>" , no CSS essa classe é chamada como .apresentacao__links, retirando o > interligamos o CSS com HTML;
  • No CSS, o width dos nossos botões estão sendo definidos em porcentagem e não em pixels (width: 280%;) mudando % para px seus botões ficam como desejado.

Em relação ao espaçamento, esse comportamento é algo esperado em monitores de dimensões pequenas. Podemos solucionar esse problema de algumas formas:

  • Acrescentando a propriedade width na classe apresentacao__links:

      .apresentacao__links{
          display: flex;
          justify-content: space-between;
          width: 615px;
      }
  • Diminuindo o zoom da página, deixando em 75%.

Espero ter ajudado!

Fico à disposição, tenha um bom dia e bons estudos.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓