3
respostas

Problema com responsividade

Rapaziada, estou com uma dúvida aqui, eu segui todos os passos do curso, porém bem no final tive um probleminha com o "flex-grow", este elemento me ajudou a ajustar os vídeos, ficando responsivo, porém teve um vídeo que quebrou a linha e ocupou todo o espaço da tela, qual foi o erro? Imagem do erro

Pasta com os arquivos: https://drive.google.com/drive/folders/1FprGf3V0htAIh6hPOC8z-z45alijQkvE?usp=sharing

3 respostas

Olá Filipe, tudo bem?

Pelo que pude verificar na imagem que você compartilhou, o vídeo que quebrou a linha está com o valor de "flex-grow" maior do que os outros elementos. Isso fez com que ele ocupasse todo o espaço disponível na tela, deixando os outros elementos em uma nova linha.

Para corrigir esse problema, você pode ajustar o valor de "flex-grow" desse elemento para que ele fique proporcional aos outros elementos. Por exemplo, se você tiver 3 elementos e quer que cada um ocupe 1/3 ou 1/5(como os outros vídeos aparentam ter) do espaço disponível, ou você pode definir o valor de "flex-grow" como 1 para cada elemento.

Contudo, você não precisa se preocupar com isso, na verdade, isso é uma configuração feita por uma questão de estética por parte do time de desenvolvimento do curso, para evitar deixar somente um item pequeninho normal como os outros na parte mais inferior da página, portanto isso foi algo que o time de design configurou.

Espero que essa dica ajude! Se você tiver alguma outra dúvida, é só perguntar.

E como você disse que não havia entendido sobre flex-grow muito bem eu vou deixar a documentação dele aqui para você conferir:

Espero ter ajudado e bons estudos!

Obrigado, Renan!

Também consegui corrigir colocando "max-width", aí esse vídeo que estava ocupando a tela toda, ficou do mesmo tamanho que os demais. Essa solução também pode ser usada ou poderá causar algum problema mais pra frente?

Olá Filipe, tudo bem contigo?

Olha eu não posso ter 100% de certeza e afirmar que não, pois tem chances dessa propriedade atrapalhar, mas isso depende da forma que você empregou ela no seu projeto.

Mas no geral o max-width não costuma dar problemas, talvez ele possa quebrar o layout quando você for trabalhar com responsividade mobile, mas normalmente ele não atrapalha, sendo usado para conter o tamanho das imagens em vários momentos da programação.

Então eu posso lhe dar 100% de certeza, mas eu posso afirmar que se ele vai atrapalhar ou não realmente vai depender de como você usou ele.

Em suma seria isso, abraços e bons estudos.