3
respostas

Foto em cima da lista

Boa Tarde. Fazendo o passo a passo da aula, ao inserir o inline-block , a imagem toma o espaço do texto.

segue código referente ao html:

<section class="beneficios">
                <h3 class="titulo-principal">Benefícios</h3>

                <div class="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>

                <div class="video">
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
            </section>

Segue código referente ao css:

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

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

.imagem-beneficios {
    width: 60%;
}    
3 respostas

Oi, Flavio, tudo bem?

Na sua tag div chamando a classe beneficios não está igualmente como no arquivo .css que está declarado como.conteudo-beneficios>. O nome da classe precisa ser igual seja no arquivo html, seja no css. Assim, o estilo vai ser aplicado.

Espero ter te ajudado!

Bom dia! Então, eu concertei esse erro, porém continuou o problema, como meio de tirar duvida, baixei o projeto do curso e o problema continuou também.

Oi, Flavio!

Se puder compartilhar o seu projeto completo pelo github ou pelo google drive para que possa baixar, testar e entender melhor o porquê desse comportamento.