Trying to Change the images that appear on slideshow depending on what device the user is using.

using this link https://community.shopify.com/c/Shopify-Design/Different-images-for-mobile-than-desktop-web/m-p/523193#M133531 I have tried to change the images showing depending on the the device the user is using.

the problem is, is that both images are being displayed even though I have called 1 out to be hidden, so maybe there is something I have forgotten to add in the code?

I feel like I am close I just need a little help.

https://website-test123.myshopify.com/

thalim = password

any help would be greatly appreciated.

{%- assign img_url2 = block.settings.image_slide_mobile | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
              {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}