2
respostas

Imagem fica maior do que o da instrutora

Referente ao curso HTML e CSS: praticando HTML/CSS, no capítulo Posicionando elementos e atividade Construindo nova section

por Raphael De Souza
| 36.5k xp | 5 posts

boa tarde minha duvida é, eu segui os passos porem quando coloco width da imagem 80% ela fica grande de mais e não ficou como da instrutora!

segue parte do arquivo CSS, com essa segunda section.

.secundario__imagem {
    width: 80%;
}

.container__secundario {
    align-items: center;
    margin: 0 10em;
}

.descricao__titulo {
    font-weight: 700;
    font-size: 48px;
    color: var(--branco-principal);
    margin-bottom: 0.1em;
}

.descricao__texto {
    color: var(--cinza-secundario);
}

segue parte do codigo html com essa segunda section

</section>
        <section class="container__secundario">
            <img class="secundario__imagem" src="img/Plataformas.png" alt="Um monitor e um celular com alura plus aberto">
            <div class="container__descricao">
                <h2 class="descricao__titulo">Assista do seu jeito</h2>
                <p class="descricao__texto">Aproveite a tela grande da TV ou assista no tablet, laptop, celular e outros aparelhos. Nossa seleção de cursos não para de crescer.</p>
            </div>
        </section>

![](Insira aqui a descrição dessa imagem para ajudar na acessibilidade )

2 respostas
por David Mafra Filho
| 233.6k xp | 54 posts

Boa noite @Rafael

Segue abaixo o código da professora e o que pode ser um erro é que você está chamando uma classe container__secundario que você definiu, mas no projeto original não existe, corrija essa questão da classe e creio que poderá satisfazer sua situação.

/* Possível erro */
    <section class="container secundario">
    /* Possível erro */
        <img src="img/Plataformas.png" alt="Um monitor e um celular com a alura plus aberta" class="secundario__imagem">
        <div class="container__descricao">
            <h2 class="descricao__titulo">Assista do seu jeito</h2>
            <p class="descricao__texto">Aproveite a tela grande da TV ou assista no tablet, laptop, celular e outros
                aparelhos. Nossa seleção de cursos não para de crescer.</p>
        </div>
    </section>
por Mônica Mazzochi Hillman
| 932.5k xp | 1472 posts
Instrutor

Bom dia, pessoal!

Testei aqui no meu projeto e é realmente o que o David falou, como você colocou a classe como "container__secundario" ele não reutilizou o grid da classe "container", então a imagem tentou ocupar o espaço da página inteira através dessa porcentagem.

Você poderia ajustar a classe dessa section e ver se agora ele funciona direitinho? Não esquece de vir falar se deu certo :D