Entrar Ainda não tem acesso?
1
resposta

[Bug] Icone de perfil esta fora da tela!

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Criando Header, Flexbox e @import e atividade Customizando o Menu Hambúrguer

por Eric Rodrigues Campos
| 32.1k xp | 21 posts

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

meu cabeçalho nao esta fixo na tela, tenho que puxar para o lado para ver o icone perfil de usario!

.cabecalho__menu__hamburguer {
    width: 24px;
    height: 24px;
    background-image: url("../assets/Menu.svg");
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;


}

.cabecalho {
    background-color: var(--cor-branca);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.container {
    display: flex;
    align-items: center;
}

.container__imagem {
    padding: 1em;
}

.lista-menu {
    display: none;
    position: absolute;
    top: 100%;
    width: 60vw;

}

.container__botao:checked~.lista-menu {
    display: block;
}

.lista-menu__item,
.lista-menu__titulo {
    padding: 1em;
    background-color: var(--cor-branca);

}

.lista-menu__titulo {
    color: var(--cor-laranja)
}

.lista-menu__link {
    background: var(--cor-azul-degrade);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
   text-transform: uppercase;
}
1 resposta
por Renan Cezar Wuicik
| 3167.2k xp | 6165 posts
Instrutor Suporte Educacional Start By Alura

Olá Eric! Tudo ok contigo?

Sobre os problemas com os ícones. Isso pode estar acontecendo devido à maneira como os elementos estão sendo distribuídos dentro do seu cabeçalho.

Uma solução possível seria limitar a largura do cabeçalho para que ele não exceda a largura da viewport. Você pode fazer isso adicionando width: 100%; e box-sizing: border-box; à classe .cabecalho.

Aqui está como ficaria:

.cabecalho {
    background-color: var(--cor-branca);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

O width: 100%; faz com que o cabeçalho ocupe toda a largura da viewport e o box-sizing: border-box; garante que o padding e a borda do elemento sejam incluídos em sua largura total, evitando que ele se estenda além da viewport.

Outra opção seria tirar os valores absolutos, como, por exemplo, os PX como medida de tamanho, medidas como REM, EM, entre outros são mais recomendáveis.

Espero que isso resolva o problema! Lembre-se de que a depuração é uma parte normal do desenvolvimento e cada desafio superado é um passo à frente no seu aprendizado.

Se precisar é só falar.

Espero ter ajudado, abraços e bons estudos!