Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Bug no card

Referente ao curso React: desenvolvendo com JavaScript

por Rodrigo José Malavasi
| 111k xp | 4 posts

Depois que fiz o desafio da aula 4, criar o rodapé, percebi que ocorreu um bug no card, sendo que o cargo ficou ao lado do nome. Como abaixo: Insira aqui a descrição dessa imagem para ajudar na acessibilidadePorém, quando retiro o rodapé ou adiciono o rodapé do gabarito do desafio, o mesmo erro não ocorre, gostaria de entender o porquê. Segue o código do rodapé que fiz:

Arquivo index.js:

import "./Rodape.css"

const Rodape = () => {
    return (
        <footer>
            <section className="rodape">
                <div className="icones">
                    <img src="/imagens/fb.png" alt="Logo Facebook"/>
                    <img src="/imagens/tw.png" alt="Logo Twitter"/>
                    <img src="/imagens/ig.png" alt="Logo Instagram"/>
                </div>
                <div className="logo">
                    <img src="/imagens/logo.png" alt="Logo Organo"/>
                </div>
                <div className="texto">
                    <p>Desenvolvido por Rodrigo Malavasi</p>
                </div>
            </section>
        </footer>
    )
}

export default Rodape

Arquivo Rodape.css:

.rodape {
    background-color: #6278F7;
    display: flex;
    justify-content: space-between;
    padding: 32px 124px;
}

.icones {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33.3%
}

.icones img {
    margin-right: 32px;
    width: 20px;
}

.logo {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 33.3%;
}

.logo img {
    width: 128px;
}

.texto {
    color: #FFFFFF;
    font-size: 16px;
    text-align: center;
    width: 33.3%;
}
1 resposta
solução!
por Vinicios Neves
| 996.8k xp | 1098 posts
Instrutor Tech Lead | Tech Educator

Salve, Rodrigo!

Isso acontece que o seguinte CSS:

.rodape {
    background-color: #6278F7;
    display: flex;
    justify-content: space-between;
    padding: 32px 124px;
}

Está sendo aplicado onde não deveria:

<div className='colaborador'>
        <div className='cabecalho' style={{ backgroundColor: corDeFundo }}>
            <img src={imagem} alt={nome}/>
        </div>
        <div className='rodape'>
            <h4>{nome}</h4>
            <h5>{cargo}</h5>
        </div>
    </div>

Tem mais de um lugar com a classe rodape e o seu seletor está genérico, por isso aplica os mesmos estilos no rodapé do card de colaborador que você definiu para o rodapé da página.

Tem várias formas de corrigir isso. Trocar os nomes das classes CSS, aumentar a especificidade do seletor, e por ai vai. Uma das possíveis soluções é adicionar um seletor mais forte nos estilos do seu rodapé:

footer .rodape {
    background-color: #6278F7;
    display: flex;
    justify-content: space-between;
    padding: 32px 124px;
}

Assim os estilos devem ficar isolados e você não deve ter problemas de layout. Consegue testar? :)