Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Imagem amarela não ficou igual ao exemplo

Referente ao curso Praticando CSS: Grid e Flexbox, no capítulo Play no Grid e atividade Para saber mais: construindo um mapa

por Letícia Lauriano
| 69.7k xp | 8 posts

Olá, a imagem amarela ficou cortada e não ficou igual ao exemplo. Testei colocando o com nth (2) e nth (3) também como está no exemplo, mas a imagem manteve cortada.

Meu código CSS: 

@media screen and (min-width: 720px) {
    .banner img:nth-child(1) {
        grid-column: 1/2; 
        grid-row: 1/3;
    }

    .banner img:nth-child(4) {
        grid-column: 3/4;
        grid-row: 1/3;
    }

    .banner img:nth-child(2) {
        grid-column: 2/3; 
        grid-row: 1/2;
    }

    .banner img:nth-child(3) {
        grid-column: 2/3;
        grid-row: 2/3;
    }
}
1 resposta
por PEDRO VINICIUS FÉLIX GONÇALVES DA SILVA
| 127.8k xp | 29 posts
Auxiliar de Secretaria

Olá Letícia, eu também percebi isso e a solução que encontrei foi aumentar o grid como se ele possuísse uma coluna a mais, para que a im:nth-child(1) ficasse como um quadrado perfeito. Segue meu código:

@media (min-width: 720px) {
    .banner img:nth-child(1) {
        grid-column: 1/3;
        grid-row: 1/3;
    }

    .banner img:nth-child(2) {
        grid-column: 3/4;
        grid-row: 1/2;
    }

    .banner img:nth-child(3){
        grid-column: 3/4;
        grid-row: 2/3;
    }

    .banner img:nth-child(4){
        grid-column: 4/5;
        grid-row: 1/3;
    }
}

nesse caso obtive esse resultado: Insira aqui a descrição dessa imagem para ajudar na acessibilidade