Resizing image with another mobile friendly image

I am working on a site and need to display the desktop version of the image and hide the mobile version, then have it change once it becomes mobile to the new image. I saw a post that said to use this code but I am having a hard time getting it to work. What block id should I be using and is there any other coding I need to add? (am somewhat of a code newbie)

@mobile: ~"only screen and (max-width: 640px)";  

@desktop: ~"only screen and (min-width: 900px)";

@media @mobile {#block-yui_replacewithblockidofLargeimage {

display: none;}}

@media @desktop {#block-yui_replacewithblockidofSmallimage {

display: none;}}

52 minutes ago, SaraCreative said:

I am working on a site and need to display the desktop version of the image and hide the mobile version, then have it change once it becomes mobile to the new image. I saw a post that said to use this code but I am having a hard time getting it to work. What block id should I be using and is there any other coding I need to add? (am somewhat of a code newbie)

 

@mobile: ~"only screen and (max-width: 640px)";  

@desktop: ~"only screen and (min-width: 900px)";

 

@media @mobile {#block-yui_replacewithblockidofLargeimage {

display: none;}}

 

@media @desktop {#block-yui_replacewithblockidofSmallimage {

display: none;}}

You can try the Squarespace ID Finder extension to find the right ID: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Here is my demo for find:

- Page ID: http://recordit.co/qwnj09oNCa

- Section ID: https://recordit.co/Aj9vXw6rfY

- Block ID: https://recordit.co/kUIH4uco0b

Hope that it makes sense

On 2/22/2022 at 5:18 AM, SaraCreative said:

I am working on a site and need to display the desktop version of the image and hide the mobile version, then have it change once it becomes mobile to the new image. I saw a post that said to use this code but I am having a hard time getting it to work. What block id should I be using and is there any other coding I need to add? (am somewhat of a code newbie)

 

@mobile: ~"only screen and (max-width: 640px)";  

@desktop: ~"only screen and (min-width: 900px)";

 

@media @mobile {#block-yui_replacewithblockidofLargeimage {

display: none;}}

 

@media @desktop {#block-yui_replacewithblockidofSmallimage {

display: none;}}

If you share link to your site, we can help easier