Entrar Ainda não tem acesso?
2
respostas

Imagens ultrapassaram a lateral

Referente ao curso Layouts Responsivos: trabalhando com layouts mobile, no capítulo Particularidades de telas e atividade Unidades de medida viewport

por Roni Santa Barbara Barbosa
| 40.5k xp | 2 posts

As imagens em vez de ocupar 100% da tela, mantiveram o padding da esquerda e ultrapassaram o limite da tela do lado direito. Não encontrei o erro no código.

.destaques { background-color: var(--azul-claro);

padding-top: 2.5rem;
padding-bottom: 2rem;

}

.destaques__titulo { color: var(--cinza-escuro); font-weight: 700; font-size: 1.5rem; font-family: var(--montserrat); text-transform: uppercase; text-align: center;

margin-bottom: 2rem;

}

.destaques__painel { display: flex; flex-direction: column; align-items: center;

margin-bottom: 2rem;

}

.destaques__painel-imagem { width: 100vw;

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

margin-bottom: 5rem;

}

2 respostas
por Kenji R.Nakajima
| 118.9k xp | 6 posts

Estou com o mesmo problema, a imagem excede a direita

por Roni Santa Barbara Barbosa
| 40.5k xp | 2 posts

Consegui resolver colocando uma margem para esquerda de 6.8% nas imagens:

.destaques__painel-imagem { width: 100vw;

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

margin-left: -6.8%;
margin-bottom: 5rem;

}