3
respostas

[Dúvida] Os cards ficaram quebrados depois de adicionar o container

Depois que foi adicionando o container ficou assim Imagem com os containers quebrados

3 respostas

Olá Carlos, tudo bem contigo?

Eu entendo que você está passando por um problema com o estilo do botão, mas infelizmente somente com essa quantidade de informações que você disponibilizou eu não consegui identificar onde pode estar o problema.

Portanto, seria possível você fornecer mais informações, bem como um pouco mais do seu código?

Nesse caso 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 erro 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, o arquivo de estilo é importante, pois muito provavelmente ele pode estar quebrando a aplicação).
  • 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, 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.

Obrigado pelo comentário. Fiz o upload no github, ficou assim : https://github.com/Carl-Vini/cinetag . Esse problema aparece a partir da aula 8 do segundo capítulo

Olá Carlos, tudo bem contigo?

Peço desculpas pela demora em obter um retorno!

O problema no seu código nada mais era do que alguns errinhos no código CSS.

Você precisa fazer somente 3 pequenas mudanças ali tá.

  1. No arquivo "Card.module.css" na linha 8 modifique a propriedade justify-content: space-around; para justify-content: space-between; e você terá essa mudança:

    projeto do aluno em fase de conserto 1

    Os card serão alinhados.

  2. No arquivo "Container.module.css" na linha 2 comente o parâmetro margin: 0em 20em; dessa forma: /* margin: 0em 20em; */, e salve, isso irá gerar essa mudança:

    projeto do aluno em fase de conserto 2

    Os cards se separam, mas ficam grudados nas estremidades da página

  3. E por fim no arquivo "Inicio.module.css", na linha 3 mude justify-content: space-between; para justify-content: space-around; gerando assim esse resultado:

    projeto do aluno consertado

    Aqui é adicionado o espaçamento na section.

E de uma forma geral era isso, e só para constar, essas mudanças foram feitas usando o código que estava lá no repositório do GitHub que você compartilhou tá, então eu usei aquele código para fazer os testes e chegar nesse resultado tá.

Era isso, espero ter ajudado, caso precise eu estarei por aqui!

Abraços e bons estudos.

Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓