Olá. Não estou conseguindo deixar a página (título, parágrafo e botões) de modo centralizado ao abrir em tela menor.
Link do projeto no Github:
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Olá. Não estou conseguindo deixar a página (título, parágrafo e botões) de modo centralizado ao abrir em tela menor.
Link do projeto no Github:
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.
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.