7
respostas

[Dúvida] A minha página não está centralizando quando abre na tela menor

Olá. Não estou conseguindo deixar a página (título, parágrafo e botões) de modo centralizado ao abrir em tela menor.

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

Link do projeto no Github:

https://github.com/GilvaneideMedeiros/Projeto-Inicial_Site

7 respostas

Olá! No seu CSS não tem características para versão mobile. Tente adicionar o seguinte (pode mudar as medidas á sua preferencia).

 @media (max-width: 1200px) {
        .cabecalho {
            padding: 10%;
        }
    
        .cabecalho__menu {
            justify-content: center;
        }
    
        .apresentacao {
            flex-direction: column-reverse;
            padding: 6%;
            justify-content: center;
            margin: 0 auto;
        }

        .apresentacao__conteudo {
            width: auto;
        } 
    }

Eu já havia feito tudo de responsividade. Estava tudo OK. Fiz commits, mas os comitts de hoje, do CSS não estão aparecendo. No Github aparece o código antes de fazer as alterações de responsividade. Pena que aqui não dá p inserir gravação de tela.

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

Este é meu código aberto no VS Code.

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

:root{ --cor-primaria: #034C53; --cor-secundaria: #FFC1B4; --cor-terciaria: #F38C79; --cor-hover: #007074; --cor-fonte-primaria: 'Krona One', sans-serif; --fonte-secundaria: 'Montserrat', sans-serif; }

*{ margin: 0; padding: 0; }

body{ height: 100vh; box-sizing: border-box; background-color: var(--cor-primaria); color: var(--cor-secundaria); }

.titulo-destaque{ color: var(--cor-terciaria); }

.cabecalho { padding: 6% 0% 0% 10%; }

.cabecalho__menu__link{ font-family: var(--fonte-secundaria); font-size: 1.5rem; color: var(--cor-terciaria); font-weight: 600; margin: 0 0.625rem; padding: 0.625rem 1.25rem; text-decoration: none;}

.cabecalho__menu{ display: flex; gap: 80px; }

.cabecalho__menu__link{ font-family: var(--fonte-secundaria); font-size: 1.5rem; color: var(--cor-secundaria); font-weight: 600;}

.cabecalho__menu__link:hover { background-color: #F6F6F6; color: var(--cor-primaria); }

.apresentacao{ padding: 5% 15%; display: flex; align-items: center; justify-content: space-between; gap: 40px; text-indent: 0%; } .apresentacao__conteudo{ width: 50%; display: flex; flex-direction: column; justify-content: space-between; gap: 82px;}

.apresentacao__conteudo__titulo{ font-size: 2.25rem; font-family: var(--cor-fonte-primaria); justify-content: center;}

.apresentacao__conteudo__texto{ font-size: 1.5rem; font-family: var(--fonte-secundaria); }

.apresentacao__links__navegacao{ display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 32px; width: 50%; } .apresentacao__links__subtitulo{ font-family: var(--cor-fonte-primaria); font-weight: 400; font-size: 1.5rem; justify-content: center; margin: 20px; } .apresentacao__links__navegacao{ /* background-color: #22D4FD; */ display: inline-flex; justify-content: center; gap: 5px; border: 2px solid var(--cor-terciaria); width: 50%; text-align: center; border-radius: 8px; font-size: 1.5rem; font-weight: 600; padding: 1.34rem 0; margin-bottom: 20px; text-decoration: none; color: var(--cor-secundaria); font-family: var(--fonte-secundaria); }

.apresentacao__links__navegacao:hover{ background-color: var(--cor-secundaria); color: var(--cor-hover); }

.apresentacao__imagem{ width: 50%; }

.rodape{ padding: 1.5rem 0; color: var(--cor-primaria); background-color: var(--cor-terciaria); text-align: center; font-family: var(--fonte-secundaria); font-size: 1.5rem; font-weight: 400; }

@media (max-width: 1200px){ .cabecalho{ padding: 10%; }

.cabecalho__menu{
    justify-content: center;
}

.apresentacao{
    flex-direction: column-reverse;
    padding: 5%;
}

.apresentacao__conteudo{
    width: auto;        
}

}

Percebi que havia outro arquivo CSS na raiz, desatualizado, ai exclui e fiz o commit novamente e voltou o arquivo atualizado.

Boa noite! Você tem dois arquivos de estilo. Um na pasta styles, atualizado. Outro na raiz, na pasta principal, desatualizado. Tente fechar o VS Code, excluir o style.css que está na pasta principal, desatualizado, através das propriedades da pasta no Windows e faça um commit no VS Code. Você também pode excluir este arquivo diretamente no repositório de GitHub.

Percebi que havia outro arquivo CSS na raiz, desatualizado, ai exclui e fiz o commit novamente e voltou o arquivo atualizado.

Ótimo! Agora vai dar certo!

Obrigada.