Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

[Dúvida] css do formulario errado.

css esta assim:

.formulario {
    display: flex;
    justify-content: center;
    margin: 80px 0;
}

.formulario form {
    max-width: 80%;
    background-color: #F2F2F2;
    border-radius: 20px;
    padding: 36px 64px;
    box-shadow: 8px 8px 16px rgba(0, 0 ,0, 0.08);
}

e o resultado ficou assim: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

5 respostas

Oi Andre! Tudo bem contigo?

Bom eu testei o CSS que você compartilhou, aqui no meu projeto do curso e não houve mudança.

Portanto, eu acredito que o problema não seja no CSS, mas sim no JavaScript. Portanto, eu vou pedir que você compartilhe um pouco mais do seu código comigo para que eu possa lhe ajudar melhor.

E caso estiver tubo bem para ti, então eu gostaria que você me informasse o seguinte para que eu possa ajudar da melhor forma:

  • A partir de qual aula que você verificou que o problema foi manifestado?
  • Em qual arquivo você estava trabalhando quando isso aconteceu? (Se possível compartilhe ele e o arquivo de estilo responsável por ele).
  • Você tentou de alguma forma procurar alguma ajuda em algum outro local além daqui? (Por exemplo, você buscou ajuda com alguma IA talvez? Ou então fez alguma pesquisa para entender o que pode ter acontecido? Eu pergunto isso, pois se você encontrou alguma informação relevante, isso pode ser útil para que eu possa ter uma melhor contextualização da sua situação).
  • E se possível você poderia colocar o seu projeto completo, com os arquivos de estilo, imagem, e código-fonte em alguma plataforma de armazenamento de projetos, como, por exemplo, o GitHub, o Google Drive, ou talvez a Replit ou quem sabe alguma outra plataforma que você conheça ou tenha conta. (Se eu tivesse todo o código e estilos + imagens, eu poderia fazer todos os testes necessários por aqui e lhe ajudar de uma melhor forma).

E de uma forma geral seria isso.

Para partilha de códigos eu recomendo o GitHub, caso você precise de ajuda para usá-lo, assista essa aula aqui, onde a instrutora Mônica Mazzochi Hillman ensina como exportar um projeto para o GitHub, sem precisar usar Git. Contudo é importante lembrar que exportar um projeto para o GitHub sem utilizar o Git pode ser muito limitante, visto que em alguns casos projetos com muitos arquivos e com muitos megabytes de informação não são exportados completamente utilizando o método passado no link que disponibilizei, então pode ser que isso não funcione para o seu projeto tá.

E se você não tem uma conta no GitHub, aprenda a criar uma aqui.

No geral era isso tá.

Aguardo sua resposta para que eu possa te auxiliar da melhor forma possível! Abraços e bons estudos.

Olá Renan Segue o repositório no github https://github.com/AndreGuima/organo

meu comportamento é o mesmo postado por outro aluno aqui https://cursos.alura.com.br/forum/topico-codigo-css-250264

eu notei o problema na mesma aula onde ele fazia o css do form https://cursos.alura.com.br/course/react-desenvolvendo-javascript/task/107398

Olá Andre! Peço desculpas pela demora!

No seu caso, pelo projeto que você me enviou eu testei aqui em vários tipos de tela, tudo o que fiz foi baixar o projeto da main do repositório do link que você enviou e dar um npm install e depois um npm start, e na minha tela ficou perfeito, eu tentei abrir o Dev-Tools e ver o projeto desde a tela 4k de 2560px até a Mobile S de 320px e Galaxy Fold de 280px, e em todo o formulário está igual o da aula.

Então eu tentei copiar o código CSS que você colocou aqui no fórum e salvar e testar a visualização nesses tipos de tela para testar e tudo continua igual, a visualização está impecável.

Portanto, eu preciso perguntar, você conseguiu resolver o problema sozinho?

Era isso.

Abraços e bons estudos!

solução!

Oi Renan, obrigado pelo retorno, e pelo esforço em tentar reproduzir. Consegui resolver sim! até para ajuda de outras pessoas que possam ter o mesmo problema, eu cometi um erro simples por falta de atenção, coloquei o className='formulario' na tag form e não no section, simples assim, esse era o erro. Obrigado mais uma vez, agora esta tudo resolvido.

Ah, sim, entendo, faz sentido!

Mas muito obrigado por compartilhar sua solução, acredito que ela vai ajudar outros colegas.

Se precisar é só falar! Abraços e bons estudos.