Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Elemento se deslocando sozinho

por Iury Gontijo Silva
| 248.2k xp | 320 posts

Olá, pessoal! Espero que estejam todos bem!

Estou com uma dúvida em um projeto que estou realizando, que se trata de uma calculadora de idades. Estou fazendo a construção da página primeiro e, a princípio, estava tudo certo, faltando apenas adicionar as frases de erro para quando o formulário for preenchido de forma inválido ou não for preenchido. O erro acontece quando, ao fazer a inserção dos textos que apontam o erro, os campos de formulário se deslocam para a esquerda, além de aparentemente não aceitar modificação de posicionamento, visto que tentei modificar o 'justify-content' e não foi possível. Seguem imagens com o erro e um comparativo de como está sem apresentação dos textos:

Esta é a imagem do resultado normalmente, e como deve ficar:

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

E essa é a imagem com o erro, com os elementos deslocados para a esquerda, após inserção dos textos de erro no preenchimento do formulário:

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

Por questão de tamanho, não vou enviar os códigos aqui pelo chat do fórum, mas deixo meu repositório do projeto, para que possam dar uma olhada e tentar me ajudar, por favor:

Link do repositório: https://github.com/Iurygon/Age_Calculator

Desde já, muitíssimo obrigado!

2 respostas
solução!
por Victor Costa Santos
| 1947.3k xp | 3759 posts
Alura Scuba Team Monitor de ForumOps

Olá, Iury! Espero que esteja bem.

Notei que em dispositivos menores, como celulares, o texto fica muito grande em relação ao espaço disponível. Sugiro diminuir o texto de acordo com o tamanho da tela.

No mais, alterei as seguintes classes e obtive esse resultado:

A imagem mostra o projeto da calculadora de idade com o design melhor aprimorado 

.container__principal{
    width: 80%;
    background-color: var(--branco);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 15px 15px 70px 15px;
    padding: 40px 0;
}

.form__inputs{
    max-width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    text-align: start;
}

.form__input_container{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    align-content: center;
}



.form__label{
    font-size: 18px;
    font-weight: 600;
    color: var(--cinza__esfumacado);
}

.input__erro_falta, .input__erro_invalido{
    font-size: 14px;
    color: var(--vermelho__claro);
    margin-top: 10px;
    max-width: 80%;
    text-align: start;
}

E sugiro que explore as seguintes midia querye a fim de melhorar as responsividade para aparelhos menores, caso queira é claro:

@media screen and (max-width: 600px) {
    .input__erro_invalido, .input__erro_falta {
        justify-content: center;
        font-size: 1rem; 
        max-width: 80%;
        margin: 10px 5px; 
    }

    .form__inputs {
        padding: 0 1%; 
        max-width: 100%;
    }
}

Espero ter ajuadado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Iury Gontijo Silva
| 248.2k xp | 320 posts

Muitíssimo obrigado, Victor, me ajudou bastante!