Skip to content
Submitted about 4 years ago

JavaScript solution to horizontal scrolling (Flexbox, Mobile-First)

Ben Andrew Merritt•345
@b-a-merritt
A solution to the Digital bank landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I was unable to crop the "mockups" image (the four phones by the nav) with a clip-path while not having a horizontal scroll. I worked around this problem with a bit of JavaScript. While I know my solution works for most users who don't play around with the viewport width, I had one issue arise from my work-around:

When going between media queries at 1200px, the JavaScript that I implemented does not revert or change the photos.

  1. Is there a practical reason to do this?

  2. Is there a different but better work-around that wouldn't have this issue, specifically with a CSS ruleset using clip-path?

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Ben Andrew Merritt's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord