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

[Dúvida] O meu menu está saindo cortado

Olá, tenho uma duvida em relação as medidas de W e H. No da instrutora está saindo corretamente porem o meu com 24px esta saindo cortado...

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-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="./assets/Logo.svg" alt="Logo da AluraBooks">
        <a href="#"><img src="./assets/Favoritos.svg" alt="Meus Favoritos"></a>
        <a href="#"><img src="./assets/Sacola.svg" alt="Minhas Compras"></a>
        <a href="#"><img src="./assets/Usuario.svg" alt="Meu Usuario"></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("../assets/menu.svg");
    display: inline-block;
}

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

2 respostas
solução!

Parece que o código fornecido está tentando criar um ícone de menu (hamburguer) usando a classe .cabecalho_menu-hamburguer. Se o ícone está saindo cortado, pode haver algumas razões para isso. Aqui estão algumas coisas que você pode verificar:

  1. Imagem do ícone: Certifique-se de que a imagem menu.svg está correta e não está cortada dentro do próprio arquivo SVG. Abra o arquivo menu.svg e verifique se a imagem do ícone está completamente contida dentro do arquivo.

  2. Estilo CSS: Pode haver estilos adicionais ou herdados que estão afetando a exibição do ícone. Tente adicionar estilos específicos para garantir que a largura e altura do ícone sejam respeitadas. Você pode adicionar background-size: cover; para garantir que o ícone cubra completamente a área designada.

.cabecalho_menu-hamburguer {
    width: 24px;
    height: 24px;
    background-image: url("../assets/menu.svg");
    display: inline-block;
    background-size: cover; /* Adicione esta linha */
}
  1. Depuração com DevTools: Use as ferramentas de desenvolvedor do seu navegador para inspecionar o elemento .cabecalho_menu-hamburguer e veja se há alguma sobreposição de estilos que pode estar causando o corte.

Se o problema persistir, verifique se você pode fornecer mais detalhes ou compartilhar a imagem do ícone menu.svg para uma análise mais aprofundada.

Muito obrigada!