Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Categorias não está ficando do formato desejado

Referente ao curso CSS Grid: simplificando layouts, no capítulo Criando o layout da seção de destaques e atividade Estilizando os destaques

por Israel dos Santos Hamdan D'Araujo
| 80.6k xp | 122 posts

Olá, eu estou com um pouco de dificuldade pois minha pagina está assim ICategoria da pagina não funciona conforme a imagem mostra, vou mandar o meu html dessa seção e o CSS, pois não consigo encontrar o erro <div class="destaques__categorias"> <ul class="destaques__categorias___lista"> <li class="destaques__categoria___item"> <a href="#" class="destaque__categoria___link"> <i class="destaques__categorias__icone fab fa-buromobelexpert"></i> Aplicativos populares </a> </li> <li class="destaques__categoria___item"> <a href="#" class="destaque__categoria__link"> <i class="fas fa-list-ol"></i> Jogos populares </a> </li class="destaques__categoria___item"> <a href="#" class="destaque__categoria__link"> <i class="far fa-star"></i> Em destaque </a> </li class="destaques__categoria___item"> <a href="#" class="destaque__categoria__link"> <i class="far fa-bell"></i> Lançamentos </a> </li> </ul> </div>

''.destaques__categorias { grid-column: 1 / 3; grid-row: 3 / 4; }

.destaques__categorias___lista { display: flex; flex-wrap: wrap; height: 100%; justify-content: space-between; }

.destaques__categoria___item { align-items: center; background: #fdfdfd; border-left: 5px solid transparent; color: #333333; display: flex; padding: 1rem; width: 50%; } ''

não consegui deixar o css como codigo aqui mas eu tentei

3 respostas
solução!
por Gabriela França
| 47.7k xp | 22 posts
Alura Scuba Team Scuba Front-end

Oiii, Israel! Tudo bem?

Isso está acontecendo porque não está ocorrendo a abertura e fechamento da tag li da forma ideal

Está escrito dessa forma

<li class="destaques__categoria___item">
    <a href="#" class="destaque__categoria__link">
        <i class="fas fa-list-ol"></i>
         Jogos populares
    </a>
 </li class="destaques__categoria___item">
    <a href="#" class="destaque__categoria__link">
       <i class="far fa-star"></i>
        Em destaque
    </a>
  </li class="destaques__categoria___item">
      <a href="#" class="destaque__categoria__link">
        <i class="far fa-bell"></i>
        Lançamentos 
      </a>
  </li>

Observe a tag de fechamento </li> está recebendo uma classe que deveria estar em uma nova tag li e isso gera uma desordem no código, por isso não está ficando da forma esperada

Abrindo e fechando a tag li o código fica dessa forma: 

<li class="destaques__categorias___item">
   <a class="destaques__categorias___link" href="#">
      <i class="fas fa-list-ol"></i>
       Jogos populares
   </a>
 </li>
<li class="destaques__categorias___item">
   <a class="destaques__categorias___link" href="#">
     <i class="far fa-star"></i>
     Em Destaque
   </a>
</li>
<li class="destaques__categorias___item">
   <a class="destaques__categorias___link" href="#">
     <i class="far fa-bell"></i>
     Lançamentos
   </a>
</li>

Em caso de mais dúvidas, me coloco à disposição.

Grande abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Higo Ricardo de Oliveira Melo
| 139.8k xp | 104 posts
Técnico

O erro é esse mesmo!

por Israel dos Santos Hamdan D'Araujo
| 80.6k xp | 122 posts

Obrigado Gabriela, era isso mesmo, eu que n consegui enxergar o erro, é que eu fui fazendo junto com o Emmet ai eu devo ter me atrapalhado em algo ou ele também pode ter se atrapalhado em algo, eu to aprendendo a usar ele agora ai fico meio confuso as vezes, ou na hora de digitar mesmo. Mas obrigado pelo help