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

[Dúvida] Meu icone do @import está cortado

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Criando Header, Flexbox e @import e atividade Header, Flexbox e @import

por Caio Icaro Garcia Ribeiro
| 75.2k xp | 7 posts

Meu menu.svg aparece cortado. To quebrando a cabeça tentando resolver isso...

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, inicial-scale=1.0">
        <title>AluraBooks</title>
        <link rel="stylesheet" href="/reset.css">
        <link rel="stylesheet" href="/styles.css">
    </head>
    <body>
        <header class="cabecalho">
            <span class="cabecalho___menu-hamburguer"></span>
            <img src="img/Logo.svg" alt="logo da alurabooks">
            <a href="#"><img src="img/Favoritos.svg" alt="meus favoritos"></a>
            <a href="#"><img src="/img/Compras.svg" alt="carrinho de compras"></a>
            <a href="#"><img src="/img/Usuario.svg" alt="meu perfil"></a>
        </header>
    </body>
</html>
@import url("/styles/header.css");

:root {
    --cor-de-fundo: #EBECEE;
}

body {
    background-color: var(--cor-de-fundo);
}
.cabecalho___menu-hamburguer {
    width: 24px;
    height: 24px;
    background-image: url("../img/Menu.svg");
    display: inline-block;
}
3 respostas
solução!
por Lorena Garcia
| 7833.5k xp | 11342 posts
Alura Scuba Team Suporte Educacional

Oi Caio, tudo bem?

Me parece um bug da ferramenta do desenvolvedor. Se com o decorrer das aulas não arrumou (a instrutora adiciona mais propriedades), você pode aumentar a largura e altura do Menu.

Colocando assim:

.cabecalho___menu-hamburguer {
    width: 40px;
    height: 40px;
    background-image: url("../img/Menu.svg");
    display: inline-block;
}

Que o resultado é esse:

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

Infelizmente ás vezes acontecem esses bugs que não conseguimos explicar e temos que encontrar soluções.

Ah mais uma coisa, so ajusta a sua tag meta que está assim:

<meta name="viewport" content="width=device-width, inicial-scale=1.0">

Com inicial-scale, corrige para initial, assim:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Você sempre pode comparar o seu código com o da instrutora, deixamos o link no começo de cada aula :D

Um abraço e bons estudos.

por Charles Martins Rodrigues
| 73.9k xp | 21 posts

Uma dica man, a sintaxe das classes..


/* (PS6) no caso acima */
.cabecalho___menu-hamburguer {
    width: 40px;
    height: 40px;
    background-image: url("../img/Menu.svg");
    display: inline-block;
}

/* (PS6) tornando mais legível e
na tag fica mais  curto pra chamar
class="" */

.hdr-mnu-ham, .hd-m-ham {
    width: 40px;
    height: 40px;
    background-image: url("../img/Menu.svg");
    display: inline-block;
}

/* alias acima, caso precise chamar e não inchar seu html como nome de classe gigante... 
.hd-m-ham { 

*/

Espero que facilite seu aprendizado, fica bem...

por João Gabriel Nunes da Silva
| 58.7k xp | 2 posts

Tive o mesmo problema, pelo que observei a "dimensão" dos arquivos svg presentes no zip apresentam diferenças da exportada pelo figma, como se houve-se uma margem nelas. Então caso você também tenha baixado o zip, indico baixar todas as imagens pelo figma :D.