Mobile-first solution with SCSS && GSAP / ScrollTrigger animations

Community feedback

• 

  CyrusKabir•1,885

  @CyrusKabirPosted over 2 years ago

  Hello, you did a clean and good work on this challenge but your landing page have a horizontal scroll on mobile and I test it with both dev tools and my mobile and still I don't know how to fix it

  Marked as helpful

  1

  ---

  

  Karol Binkowski•1,640

  @GrzywNPosted over 2 years ago

  @CyrusKabir Alright I've just put really simple solution and it worked:

  body, header, main, footer {
  overflow-x: hidden;
  max-width: 100vw;
  }
  

  1

  

  CyrusKabir•1,885

  @CyrusKabirPosted over 2 years ago

  @GrzywN Yes this snippet work but main issue still exist. when we have overflow on any direction it's better to find that element which cause overflow and remove it or fix it you can read this article for debugging overflow issue on site : debugging overflow

  0

  

  Karol Binkowski•1,640

  @GrzywNPosted over 2 years ago

  @CyrusKabir yeah ik

  0
• 

  Anna Leigh•5,135

  @brasspetalsPosted over 2 years ago

  Hi, Karol! 👋 Great job on this challenge! The GSAP animations fun, and I can confirm that the prefers-reduced-motion query does work. Your HTML semantics are solid, and overall it responds great. 👍

  The only thing I noticed is that the logos from 400 - 900px get very stretched and pixelated. I suggest removing flex: 1 from .partners__logo and then adding justify-content: center to .partners. You could then play around with your existing gap property on .partners to get the spacing how you want. At the very least this will prevent the logos from getting HUGE on large mobile and tablet screens.

  Again, nice job on this one!

  Marked as helpful

  1

  ---

  

  Karol Binkowski•1,640

  @GrzywNPosted over 2 years ago

  @brasspetals Hi, thanks a lot! I couldn't find a right way to make partners section for medium sized screens. I'll try to improve it, at least a little bit. 👍

  Edit: Wow, I did what you've suggested and it's clean. I don't believe that I didn't come up with this simple idea 😅 Once again, thanks a lot! 😁

  0
• 

  P

  Fluffy Kas•7,695

  @FluffyKasPosted over 2 years ago

  Hiyo, everything here looks really very neat! I tried to look for a prefers-reduced-motion query but couldn't find it. Is there any? I might just be completely blind tbh! >.<

  1

  ---

  

  Karol Binkowski•1,640

  @GrzywNPosted over 2 years ago

  @FluffyKas It's in the Animations.mjs file, line 11. tbh I don't even know, if it even works 😅

  1

  

  P

  Fluffy Kas•7,695

  @FluffyKasPosted over 2 years ago

  @GrzywN Ahaha, thanks for specifying the line, never would've found it >.<

  0