Aproximadamente aos 4:10 do vídeo (aula 5 - atividade 3) foi colocado na classe "populares__card" um margin-right:0.
Não percebi diferença após recarregar a página.
Por que não funcionou?
Solucionado (ver solução)
Solucionado
(ver solução)
9
respostas
respostas
populares__card margin-right
Vi que o problema se deve ao grid-gap na classe destaques.
Fiz um teste e coloquei margin-right:-.6em no pai (populares__conteudo) e funcionou.
Era a melhor solução?
Pelo oque eu entendi, ele reseta o margin-right para tirar o espaçamento que estava empurrando as cards junto com scroll na horizontal.
Essa que foi a mudança explicada sobre o espaçamento extra que ficou no card empurrando o scroll.
Se você fizer isso no conteúdo pai de margin negativada nem sempre é a melhora prática para se manter.
Sim, mas você percebeu que o margin-right não funcionou, certo?
Cristiano olhando o vídeo parece que funcionou sim, o scroll horizontal sumiu. Agora sobre o código fonte eu não sei dizer pois não fiz essa analise.
Lucas, não consegui enxergar nenhum scroll horizontal nesse vídeo. Olhei várias vezes o trecho de 4:00 a 4:17 e não percebi diferença alguma.
Inclusive não ouvi o Matheus falando nada de scroll. Ouvi ele falando de espaço diferente à direita dos blocos.
solução!
Cristiano, analisando novamente agora que eu vi a parte que ele realmente comenta é sobre o tamanho do card onde o margin acaba diminuindo o mesmo conforme ele mostra o componente acima.
Mas realmente não mudou nada.
Baixei o código aqui e consegui ajustar zerando a propriedade grid-gap do componente destaques no media query com min-with 0
Olha o print do alinhamento e solução
Novamente comentando sobre a margin negativa, nesse caso não funcionaria e também não é a melhor solução.
Eu removi o grid-gap pos era ele que estava aumentando o box do elemento acima, não sei se essa era a intuição do Matheus.
Legal Lucas, agora estamos falando da mesma coisa.
Então, a intenção do Matheus foi de colocar um espaçamento entre os destaques, mas o grid-gap tem um efeito negativo, que é extrapolar o box porque ele só desloca os elementos para dar o espaçamento.
Vide imagem abaixo:
E o problema não ocorre só com as dimensões reduzidas, já no 'modo desktop' tinha a diferença (acho que até mais evidente). O margin-right: 1rem; no responsivo.css já tinha deixado um deslocamento considerável.
Isso mesmo Cristiano, problema resolvido? Ou ainda restam dúvidas?
Não falei no outro post, mas boa sacada de usar o media query, Lucas. Obrigado!