How to place an image block so that it sits in the right place

I have a hero section that has a background image and two image blocks sitting on top. One of the smaller image blocks contains an icon and has been placed correctly on desktop and mobile, but as soon as the screen resolution is in between those two sizes it starts floating around in a weird place. 

Below 600px and above 1200px the placement is fine, but if the screen width is between 600-1200px then it looks strange.

Screenshots below.

Page is: https://www.hoptroff.com/product/software
Password: Test

Is there any way (maybe through CSS) that I can solve this? I'd be happy even to just make it disappear between 600-1200px.

Mobile: okay
 

Desktop: okay

In between size: the icon is floating off by itself

Hi ClaireHops,

This is Noah from Snowday, nice to meet you!

This isn't a Squarespace or code based solution but something that I do a lot when faced with the problem you're facing: have you thought about using a graphic design software to add the icon to the photo exactly how it should be, exporting as a .png, then uploading that new .png where the current photo of the computer is, and deleting the separately uploaded icon altogether?

This solution is pretty simple, doesn't require any extra code, and ensures that the icon is exactly where you want it no matter the screen size (because it can't move!).

I know it may not be the exact solution you were looking for, but I thought I'd share because this is a strategy that I use for graphics all the time. Let me know if this helps!

@Snowday Hey, thanks for the reply! The laptop has an animated gif in it that I made in AE. I could put the icon over it within the animation, but I kind of like the feeling of layering and motion that exists with the two elements being separate. 

@nick_sh this worked perfectly, thank you!

@ClaireHops Great! Please mark as correct so others can benefit from the answer too — thanks.