3
respostas

não consigo deixar a imagem com width:100vw

Eu segui as instruções e preparei o material para a próxima aula.

Quando coloquei a imagem vi que no não tinha nenhum CSS estilizando ela então coloquei a estilização parecida com as imagens do painel destaque. CSS: .sobre__imagem{ width: 100vw; max-width: 600px; box-shadow: 0 2px 10px 5px #00000020;

}

Entretando, a imagem não gruda na parede esquerda e a tela cria uma rolagem para direita.

verifiquei que ela esta dentro da class container que quando tiro a margin-left: 6%, o problema de resolve. mas como faço para resolver isso sem tirar essa margin do container? As outras duas imagens do painel destaque também estão com essa margin e não apresentam o problema.

3 respostas

tenha por em porcentagem o tamanho da imagem e não em view width e é sempre bom coloca display block nas imagens

Olá, eu fui comparar meu código com o seu, e percebi que você selecionou a imagem do sobre, onde a única estilização é o display: none quando estiver em celulares ou tablets e display: block em notbook e computadores desktop's. Troque .sobre__imagem por .destaques__painel-imagem. O código ficaria assim:

.destaques__painel-imagem {
    width: 100vw;
    max-width: 600px;

    box-shadow: 0 2px 10px 5px #00000020;

    margin-bottom: .5rem;
}

Espero que ajude :)

Muito obrigado pelas orientações. Eu estranhei também que o código estava diferente do usado na aula, mas essa estrutura passou a ser usada mais para a frente. Ai deu tudo certo. Obrigado pela ajuda.