I am trying to write a custom liquid that displays a certain image/video on mobile, and a secondary image/video on the desktop site (i.e. square for mobile, and landscape for desktop). The code I currently have successfully displays the desktop specific media on desktop, but show both the mobile and desktop medias when displayed on mobile (see screenshots below). I have tried a variety of different tweaks to my code, but haven’t been able to figure out how get only the mobile media to display on the mobile site. The code I am using in the custom liquid blocks for both the video and static image display is included below. Any help would be greatly appreciated. Thanks!
My website is - https://kovaasport.com/
Video Code
[
](https://kovaasport.com/collections/bike-jerseys)
Image Code