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

#7daysofcode - Problemas com responsividade

Boa tarde,

Estou finalizando o projeto e gostaria de deixa-lo responsivo.

Coloquei o menu hamburguer para a versão mobile, mas quando estou na versão desktop mesmo com o display do hamburguer em "none" ele continua deixando um espaço para o ícone no cabeçalho. Isso está fazendo com que o menu fique desalinhado.

Como deveria ficar :

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

como esta ficando:

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

Segue código : https://github.com/BrunoMartins/7daysofcode-html-css

2 respostas
solução!

Olá Bruno! Tudo ok contigo?

Bom isso é bem simples! O que aconteceu ali é que você colocou a propriedade de flex-contêiner: justify-content: space-around; na classe da tag nav, por isso o espaço foi dividiu o espaço entre os itens filhos da tag nav, e isso inclui a label que não estava sendo estilizada até então. Ou seja, quando o espaço era divido por mais que o input, a lista de itens, e etc, não fossem contados, você somente se esqueceu da label.

Dessa forma a solução foi fazer isso no arquivo nav.css:

.container__botao,
.cabeçalho__menu-hamburguer,
.opçoes__rotulo {
    display: none;
}

Ou seja, deixar a label invisível. E como você deve ter visto, eu juntei as chamadas de display em um lugar só, assim fica mais fácil de controla o que some, e evita repetição de código.

Antes estava assim (nav.css {linha 75 até 81}):

.container__botao{
    display: none;
}
.cabeçalho__menu-hamburguer{
   display: none;
}

Então eu mudei para o código de antes, ficou bem mais conciso e simplificado.

Era isso. Se tiver dúvidas é só falar! Eu estarei por aqui para ajudar.

Abraços e bons estudos.

Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓

Poxa que vacilo kkk.

Muito obrigado!!.