Entrar Ainda não tem acesso?
2
respostas

Quando o texto de apresentação do link é maior que uma linha, os ícones ficam colados e estranhos. Como resolver isso?

Referente ao curso HTML e CSS: trabalhando com responsividade e publicação de projetos, no capítulo Repositório do GitHub e atividade Projeto final do curso

por Mayk Suell da Silva Castro
| 151.4k xp | 4 posts

Já tentei usar wrap, padding e tal mas não tá funcionando, alguém consegue me ajudar?

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

Aqui o código:

// html

Home Sobre mim

Literatura contemporânea nordestina com criatividade e qualidade!

Olá! Sou Frida Abraão, multiartista com especialidade em poesia, música e artes visuais. Ajudo sua empresa a ter uma criatividade milionária. Vamos conversar?

        <div class="apresentacao__links">
            <h2 class="apresentacao__links__subtitulo">Conheça minha obra!</h2>

                <a class="apresentacao__links__navegacao" href="https://www.amazon.com.br/Pele-Alisson-Matheus-Soares-Carvalho-ebook/dp/B08DJ78J7L/ref=sr_1_3?__mk_pt_BR=%C3%85M%C3%85%C5%BD%C3%95%C3%91&crid=3EIOIWF2LTWXQ&keywords=narley+paulo&qid=1677185633&sprefix=narley+paul%2Caps%2C157&sr=8-3">
                    <img class="icon__link" src="./assets/amazon.png">Antologia Pele
                </a>

                <a class="apresentacao__links__navegacao" href="https://issuu.com/arrelique/docs/n_s_que_aqui_estamos_-_nordeste_-_editora_arreliqu">
                    <img class="icon__link" src="./assets/issuu.png"> Nós Que Aqui Estamos
                </a>

                <a class="apresentacao__links__navegacao" href="https://www.instagram.com/tv/CD4gQ9WANCk/?igshid=mfa2ygs63d83">
                    <img class="icon__link" src="./assets/instagram.png"> 'Palavra' por Teófilo Lima
                </a>

                <a class="apresentacao__links__navegacao" href="https://www.geleiatotal.com.br/2020/06/30/num-se-pode-por-frida-abraao/">
                    <img class="icon__link" src="./assets/geleia.png"> Num Se Pode
                </a>


                <a class="apresentacao__links__navegacao" href="https://www.geleiatotal.com.br/2022/01/06/prefacio-da-antologia-nossas-familias/">
                    <img class="icon__link" src="./assets/geleia.png"> Nossas Famílias
                </a>

        </div>
    </section>

    <img class="imagem__perfil" src="./assets/escritore.png" alt="Foto de Frida Abraão no lançamento da antologia "Nossas Familias"">

</main>

<footer class="rodape">
    <p>Desenvolvido por @abradevtech</p>
</footer>
2 respostas
por Mayk Suell da Silva Castro
| 151.4k xp | 4 posts

Aqui o CSS

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

:root { --cor-primaria: #000000; --cor-secundaria: #f6f6f6; --cor-terciaria: #22D4FD; --cor-hover: #272727;

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

}

  • { margin: 0; padding: 0; }

body { box-sizing: border-box; background-color: var(--cor-primaria); color: var(--cor-secundaria); }

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

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

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

.icon__link { width: 34px; height: 34px; } .meunome:hover { color: var(--cor-terciaria); }

.apresentacao{ padding: 5% 15%; display: flex; gap: 82px; align-items: start; justify-content: space-between; }

.apresentacao__conteudo { width: 50%; display: flex; flex-direction: column; gap: 30px; /* border: 3px solid white; */

}

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

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

.apresentacao__conteudo__texto { padding-top: 10%; padding-left: 4%; padding-right: 4%; font-size: 1.5rem; font-family: var(--fonte-secundaria); text-align: justify; }

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

.apresentacao__links__subtitulo{ /* padding: 10% 5% 2% 5%; */ display: flex; justify-content:center; font-family: var(--fonte-primaria); font-weight: 300; font-size: 1.5rem; }

.apresentacao__links__navegacao { display: flex; gap: 8%; justify-content: center; border: 2px solid var(--cor-terciaria); width: 70%; text-align: center; border-radius: 10px; border-top-left-radius: 0%; font-size: 1.5rem; font-weight: 800; padding: 21.5px 0; text-decoration: none; color: var(--cor-secundaria); font-family: var(--fonte-secundaria); }

.apresentacao__links__navegacao:hover { background-color: var(--cor-hover)

}

.imagem__perfil { /* border: 2px solid var(--cor-terciaria); */ width: 50%; border-radius: 15%; border-top-left-radius: 0%;

}

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

}

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

}

.cabecalho__menu {
    justify-content: center;
}
.apresentacao{
    flex-direction: column-reverse;
    align-items: center;

}

.apresentacao__conteudo {
    width: auto;
}

.icon__link {
    width: 34px;
}

}

por Renan Lima
| 3579k xp | 7541 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Mayk.

Tudo bem?

Isso aconteceu poque como os textos ficaram com tamanhos muito diferentes ele perdeu a referência do centro. Eu alterei algumas coisas e fiz uns testes e consegui um resultado legal. Eu fiz da seguinte forma:

Na classe .apresentacao__links__navegacao tinha um justify-content: center; eu alterei ele para justify-content: start; para ficar tudo no inicio colado mesmo, e então adicionei uma margem de 1em a esquerda das imagens dos links da seguinte forma: peguei a tag img pela classe do elemento pai: .apresentacaolinksnavegacao img e passei um margin-left: 1em;. Desse modo ficou bom na versão normal e na mobile.

CLASSES QUE EU ALTEREI, NÃO APAGUEI NADA DE RESTO É IGUAL:

.apresentacao__links__navegacao {
    display: flex;
    gap: 8%;
    justify-content: start;
    border: 2px solid var(--cor-terciaria);
    width: 70%;
    text-align: center;
    border-radius: 10px;
    border-top-left-radius: 0%;
    font-size: 1.5rem;
    font-weight: 800;
    padding: 21.5px 0;
    text-decoration: none;
    color: var(--cor-secundaria);
    font-family: var(--fonte-secundaria);
}

.apresentacao__links__navegacao img{
    margin-left: 1em;
}

RESULTADO:

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

É só uma ideia.

Espero ter ajudado. Qualquer dúvida manda aqui