Entrar Ainda não tem acesso?
1
resposta

Imagem benefícios desconfigurou e ficou grande

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Melhorando o CSS e atividade Pseudo-classes

por Bruna De Brito Fontana
| 34.9k xp | 5 posts

Boa tarde pessoal, ao fazer o css da parte de benefícios a imagem benefícios desconfigurou e ficou grande, tentei arrumar e não consigo, um help?

A imagem está assim:

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

.conteudo-beneficios{
    display: flex;
    width: 640px;
    margin: 0 auto;
}

.lista-beneficios{
    width: 40%;
    display: inline-block;
    vertical-align: top;

}

.imagem-beneficios{
    width: 60%;
}
<div class="conteudo-beneficios">
                <ul class="lista-beneficios">
                    <li class="itens">Atendimento aos Clientes</li>
                    <li class="itens">Espaço diferenciado</li>
                    <li class="itens">Localização</li>
                    <li class="itens">Profissionais Qualificados</li>
                </ul>

                <img src="beneficios.jpg" class="imagem-beneficios">
            </div>
1 resposta
por Heyder Henny Brasil Costa Makuxi
| 56.9k xp | 10 posts

Olá Bruna, no .conteudo-beneficios tira o display: flex;

E como estamos usando o display: inline-block, vc deve colocar a linha <img src="beneficios.jpg" class="imagem-beneficios"> </div> Grudada no </ul>

    <div class="conteudo-beneficios">
                <ul class="lista-beneficios">
                    <li class="itens">Atendimento aos clientes</li>
                    <li class="itens">Espaço diferenciado</li>
                    <li class="itens">Localização</li>
                    <li class="itens">Profissionais Qualificados</li>
                    <li class="itens">Pontualidade</li>
                    <li class="itens">Limpeza</li>
                </ul><img src="beneficios.jpg" class="imagem-beneficios">
            </div>