Mobile first workflow using CSS Grid

Community feedback

• 

  Gregg Christofferson•295

  @gchristoffersonPosted about 3 years ago

  Hey @KaskaS-O ✋

  Great job, it looks really good!!

  I looked at your code and the reason your testimonial boxes are overflowing the grid-container is because of transform: translateY(10%) on your .opinions:nth-child(2) and transform: translateY(%20) on your .opinions:nth-child(3).

  Instead try selecting .opinions:nth-child(1) and setting `transform: translateY(-20%)'

  Then select .opinions:nth-child(2) and set transform: translateY(-10%). Then adjust your row-gap accordingly. This way you are moving the elements inside the grid and not outside of it. Let me know if that works for you.

  Marked as helpful

  1

  ---

  

  CodingDuck•390

  @KaskaS-OPosted about 3 years ago

  @gchristofferson Hi!

  Thanks for advice! It helped... sort of ;) Solved the problem in desktop layout, but it's still present in mobile vesion although there's no transform used for positioning. Do you have any idea about that?

  0

  

  Gregg Christofferson•295

  @gchristoffersonPosted about 3 years ago

  Hi @KaskaS-O 🙋‍♂️

  Now it's perfect! 👍 I personally didn't see any issues with the mobile version. Great job!

  0