Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Imagens não estão respaitando o grid

Ao revisar o código não consegui encontrar o erro, por isso venho pedir ajuda. As imagens estão permanecendo ao cetro e mexendo um pouco no código pude perceber que elas estão ao centro por conta do width em 100%. Mas não sei o que foi de errado no código para que não fiacasse no ponto certo como deveria ficar.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Como pode verificar no trecho a cima o código em css.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

E esse código a cima é o HTML especificamente no local de categorias onde não esta saindo como o esperado.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Como pode verificar o resultado não é dos melhores. Por isso venho pedir ajuda para entender realmente no que estou errando!

1 resposta
solução!

Olá, João. Tudo bem?

Você precisa fazer os seguintes ajustes no código:

  1. Na <ul> da linha 67, você nomeou a classe como categorias__lista. No entanto ela está sendo usada como categorias__list no CSS, faça esse ajjuste no HTML: <ul class="categorias__list">

  2. No CSS, na propriedade grid-template-area da classe categorias__list, decoracao está escrita com acento. Remova os acentos para que fique como na definição do grid-area:

.categorias__list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: 
  "roupas roupas decoracao"
  "canecas acessorios acessorios";
  gap: 24px;
  list-style-type: none;
}
  1. Logo abaixo está a classe .categorias__list_item-roupa, porém, no HTML a classe está definida como categorias__list_item-roupas, com roupas no plural. É só ajustar o nome:
.categorias__list_item-roupas {
  grid-area: roupas;
}

Isso deve ser o suficiente para ajustar o site.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado