Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

A imagem da seta some ao colocar os estilos.

Referente ao curso Sass: O CSS com superpoderes, no capítulo Regras de estilo e sintaxe e atividade Estilizando componentes da página

por Gabriel Fonseca Borel
| 268k xp | 8 posts
    .breadcrumb {
            display: flex;
            justify-content: center;
            align-items: center;

    &__link {
        text-decoration: none;
        font-size: 12px;
        color: $dark-grey;
        &:hover {
            text-decoration: underline;
            color: $purple;
        }
    }

    &__img {
        width: 10px;
        margin: 8px;
    }
}

A imagem da seta do breadcrumb some quando é colocado o width: 10px.

O que será que pode estar afetando isso ?

2 respostas
solução!
por Beatriz Moura
| 770.5k xp | 1156 posts
Alura Scuba Team

Olá Gabriel, tudo bem?

Na verdade a imagem continua lá, porém com 10px ela fica extremamente pequena, dificultando a visualização. Entretanto, se dermos zoom na página, sua visualização torna a aparecer. Veja:

a imagem mostra a página com um zoom de 110% em que o ícone do breadcrumb já aparece, mesmo com a width: 10px. Ela exemplifica que o ícone não deixar de existir na página, porém está com um tamanho muito pequeno, sendo necessário dar zoom para visualização

No meu monitor a partir do zoom em 110% ela volta a aparecer, porém isso pode variar dependendo do tamanho da tela.

No projeto final do curso, a width e o margin estão modificados para um tamanho adequado para visualização, dessa forma: 

&__img {
    width: 14px;
    margin: 10px;
}

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!

por Gabriel Fonseca Borel
| 268k xp | 8 posts

Obrigado pela resposta, engraçado que no meu computador aqui no 100% a imagem não aparecia mas no 90% e no 110% para cima sim kkkkkk. Obrigado pela resposta consegui entender.