Entrar Ainda não tem acesso?
4
respostas

Icones aparecem de forma estranha

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 Bruna.rastelli
| 86k xp | 7 posts

Bom, segui exatamente como apresenta no curso, porém no meu header os icones estão dispostos bem esquisito e também o menu hamburguer aparece pela metade. Ja refiz pela segunda vez porém sem sucesso. Já não sei mais o que fazer pra tentar resolver

style.css

@import url("styles/header.css");

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

body {
    background-color: var(--cor-de-fundo);
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alura Books</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="cabeçalho">
        <span class="cabeçalho__menu-hamburguer"></span>
        <img src="img/Logo.svg" alt="Logo da Alura Books">
        <a href="#"><img src="img/Favoritos.svg" alt="Meus favoritos"></a>
        <a href="#"><img src="img/Sacola.svg" alt="minha sacola"></a>
        <a href="#"><img src="img/Usuario.svg" alt="Minha conta"></a>
    </header>
</body>
</html>

header.css

.cabeçalho__menu-hamburguer {

    width: 24px;
    height: 24px;
    background-image: url("../img/Menu.svg");
    display: inline-block;

}

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

4 respostas
por GABRIEL DUPLA
| 683.4k xp | 1662 posts
Pessoa Monitora Fórum Ops

Opa Bruna, tudo bem?

Poderia por gentileza em enviar o seu projeto completo? Dessa forma posso analisar o seu código na totalidade e simular o problema para ajudá-lo de forma mais assertiva.

Você pode compartilhar o link do seu projeto via Github.

Fico à disposição.

Tenha um bom dia e bons estudos.

por Bruna.rastelli
| 86k xp | 7 posts

Acabei de resolver mudando o header.css

De: 

 width: 24px;
 height: 24px;

PARA:

  width: 40px;
  height: 40px;
por Thiago Simões Carpinter
| 29.7k xp | 2 posts

Boa tarde! Alguém consegue me ajudar nesse mesmo problema? Tentei resolver com a solução da Bruna, mas o programa continua com aquele mesmo resultado!

por Sofia Júlia Pereira Da Cunha
| 34.7k xp | 1 posts

Boa tarde, tive o mesmo problema. Ao inspecionar o Figma do projeto vi que as propriedades do svg do menu são 48px para width e height: print do figma

alterei no código do header.css e parece ter resolvido, ficou centralizado junto com os outros:

header.css

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

resultado no live-server: Print da solução no live-server