Replace custom horizontal line image with a mobile version automatically?

Is there a way to use jquery or something to swap out a specific image every time it is used?

I have an image of a handdrawn line (being used in place of a horizontal rule), and it's too thin on mobile since it shrinks down to fit the width of the screen. So, I made a shorter version of the line to be used on mobile and I'm using a media query to hide the mobile version on larger displays and hide the desktop version on mobile.

This works for me, but will be super confusing to my client down the road if they want to insert a line on another page, etc. 

Any suggestions on the easiest way to do this? 

site password: pottery

Here's an example of the desktop version: 

And the mobile version....

Hi,

What is site url?

Argh! I could've sworn I copied/pasted it in. Here it is:

https://j-berens-pottery-demo.squarespace.com/

password: pottery

Thanks for any ideas! 

To show different image on desktop - mobile easier for your clients, you can use this approach

• add 2 images and these word to ALT: desktop mobile

• Next, use this code to Website Tools > Custom CSS

/* Hide Image with ALT: mobile on Desktop */
@media screen and (min-width:768px) {
  div.image-block:has([alt*="mobile"]) {
      display: none !important;
  }
}
/* Hide Image with ALT: desktop on Mobile */
@media screen and (max-width:767px) {
	div.image-block:has([alt*="desktop"]) {
	display: none !important;
}
}

Great idea. Thanks!

This works, but it still shows both lines while in the editor. Is there anything I can add to the code to fix that? I feel like that's still a little confusing from the client side.

Example: https://j-berens-pottery-demo.squarespace.com/pottery-care

(password: pottery) 

On 9/4/2024 at 3:47 AM, ovationcreative said:

Great idea. Thanks!

This works, but it still shows both lines while in the editor. Is there anything I can add to the code to fix that? I feel like that's still a little confusing from the client side.

Example: https://j-berens-pottery-demo.squarespace.com/pottery-care

(password: pottery) 

Can you take a screenshot in edit mode?

Here you go. Thanks for looking at it!

On 9/7/2024 at 9:56 AM, ovationcreative said:

Here you go. Thanks for looking at it!

 

 

You can target Block ID instead

/* Hide Image with ALT: mobile on Desktop */
@media screen and (min-width:768px) {
  enter-mobile-image-block-id-here {
      display: none !important;
  }
}
/* Hide Image with ALT: desktop on Mobile */
@media screen and (max-width:767px) {
	enter-desktop-image-block-id-here  {
	display: none !important;
}
}

Follow this to find ID