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

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?