Dúvida sobre alinhamento da logo e do menu

3
respostas

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 Brenda Marjorye Nunes Carvalho Alves

| 18.9k xp | 6 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.

3 respostas

por Victor Costa Santos

| 2974.4k xp | 6171 posts

Alura Scuba Team

3 semanas 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.9k xp | 6 posts

3 semanas 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

por Brenda Marjorye Nunes Carvalho Alves

| 18.9k xp | 6 posts

4 dias atrás

Prezado professor,

Peço desculpas por insistir no contato.

Entro em contato para retomar uma dúvida que encaminhei anteriormente, após o envio dos códigos que o senhor solicitou. Ainda estou com dúvida sobre o assunto e gostaria de um esclarecimento quando possível.

Agradeço desde já pela atenção e fico no aguardo.

HTML

<!DOCTYPE html>
<html>

<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="style.css">
   
</head>

<body>
     <header class="cabeçalho">
          <div class="container">
               <span class="cabeçalho__menu-hamburguer container__imagem"><span>
               <img src="img/Logo.svg" alt="Logo da Alurabooks" class=container__imagem>
          </div>
          <div class="container">
                <a href="#"><img src="img/Favoritos.svg" alt="Meus favoritos" class=container__imagem></a>
                <a href="#"><img src="img/Compras.svg" alt="Carrinho de compras" class=container__imagem></a>
                <a href="#"><img src="img/Usuario.svg" alt="Meu perfil" class=container__imagem></a>
            </div>
      </header>
</body>

</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;
}

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Tópicos relacionados

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP