Dúvida sobre alinhamento da logo e do menu | HTML e CSS: responsividade com mobile-first

2
respostas

por Brenda Marjorye Nunes Carvalho Alves

| 18.7k xp | 5 posts

Olá.

Estou com uma dúvida no projeto: a minha logo e o menu não estão ficando no mesmo lugar/alinhados como no exemplo apresentado nas aulas.

Já revisei o código, mas não consegui identificar onde estou errando. Poderia, por gentileza, me orientar sobre o que devo ajustar?

Desde já, agradeço a atenção.

![]( Insira aqui a descrição dessa imagem para ajudar na acessibilidade )

Além disso, em uma das aulas foi indicado que eu fizesse outras aulas complementares, porém ao tentar acessá-las aparece um ícone de cadeado. Fiquei sem entender se essas aulas fazem parte do curso ou se é necessário algum outro acesso.

2 respostas

por Victor Costa Santos

| 2908k xp | 6026 posts

Alura Scuba Team

2 horas atrás

Olá, Brenda! Tudo bem?

Pelas imagens que você enviou, notei dois pontos importantes que vão te ajudar a resolver essa questão do layout e a compartilhar suas dúvidas da melhor forma.

Notei no seu print que a largura da tela está em 332 x 691.
Nas aulas, o instrutor utiliza como base as dimensões do iPhone 12 Pro, que são 390 x 844.

Tente alterar essa configuração no seu navegador (nas ferramentas de desenvolvedor onde você tirou o print):

Clique no menu de dispositivos no topo da tela.
Selecione iPhone 12 Pro ou digite manualmente 390 x 844 na largura e altura.

Muitas vezes, o CSS se comporta de forma diferente em larguras muito pequenas se não houver um ajuste específico para elas.

Para que eu possa testar e identificar exatamente onde está o erro no seu CSS ou HTML, analisar por prints é um pouco difícil, pois não consigo copiar e testar o código.

Por favor, copie o seu código (HTML e CSS) e cole aqui na resposta. Para formatar direitinho, use a opção Inserir bloco de código (é o botão </> na barra de ferramentas do editor) e cole o código dentro dele. Fica assim:

.exemplo {
   color: blue;
}

Sobre o ícone de cadeado

Quando aparece um cadeado em aulas complementares ou "Para Saber Mais", geralmente significa que aquele link leva para um curso ,formação ou Alura +, que não está incluso no seu plano atual ou matrícula. Não se preocupe, esses conteúdos são extras e não impedem sua conclusão e entendimento do curso atual.

Fico no aguardo do seu código para te ajudar com o alinhamento!

Bons estudos!

Sucesso ✨

por Brenda Marjorye Nunes Carvalho Alves

| 18.7k xp | 5 posts

30 minutos atrás

Digitei 390 x 844 na largura e altura, mas nao mudou nada. segue abaixo os codigos.

HTML

**STYLE.CSS**


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

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

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

h1 {
background-color: white;
}

** HEADER.CSS**

.cabeçalho__menu-hamburguer {
width: 24px;
height: 24px;
background-image: url("../img/Menu.svg");
background-repeat: no-repeat;
background-position: center;
display: inline-block;

}

.cabeçalho {
background-color: var(--branco);
display: flex;
justify-content: space-between;
align-items: center;
}

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

.container__imagem {
padding: 1em;
}

**Sobre o ícone de cadeado**


Minha duvida sobre o icone de cadeado e ate mesmo porque quando comprei o curso estava escrito **Acesso a TODOS os cursos por 2 anos**. com esse curso bloqueado acaba que o alura nao esta cumprindo a parte que diz que seria todos os cursos.... fiquei mesmo sem entender  

**Esse e o meu plano **
23 Carreiras

2.130 Cursos
Acesso a TODOS os cursos por 2 anos
Certificado
Mentorias em grupo com especialistas
Comunidade exclusiva
Acesso ao conteúdo das Imersões
App Android e iOS para estudar onde quiser

Desde ja eu agradeço a atençao

Tópicos relacionados

Conteúdos Alura com o tema