StevenMcCarty

Hi @tuanphan, I would like to remove the image and replace it on mobile/tablet with this: Thanks for the help!

Site URL: https://www.alaskademocrats.org/home1-1 I am trying to adjust the banner image on my site for mobile and tablet. I have tried just about everything and anything, but can't get what I need. My banner image looks great for desktop, but the image is not optimized for mobile or tablet. I would like to leave the current image as is for desktop, but REMOVE that image and INSERT this image for mobile and tablet: https://images.squarespace-cdn.com/content/v1/54bee0c9e4b0441ce96c4681/5586b740-969d-447b-a3ef-2d0dc5ec117d/Bye+Lisa!+(1366+×+750+px)+(640+×+300+px).png?format=1500w I've been scraping code from the forum and other places to try to get this to work, but no luck. Here's what I most recently had in the custom CSS editor (knowing that it's probably all garbage): /* CSS FOR TABLET AND MOBILE */ @mobile: ~"only screen and (max-width: 640px)"; @tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)"; /* CSS FOR TABLET */ @media @tablet { /* Insert Code for Tablet Below This Line*/ /* Insert Code for Tablet Above This Line */ } /* CSS FOR MOBILE */ @media @mobile { /* Insert Code for Mobile Below This Line*/ #collection-620549c79509ba40c53e4392 img { display: none; } #collection-620549c79509ba40c53e4392 .sqs-block-image img.mobile { display: contain; } #collection-620549c79509ba40c53e4392 img.mobile { background: url('https://images.squarespace-cdn.com/content/v1/54bee0c9e4b0441ce96c4681/5586b740-969d-447b-a3ef-2d0dc5ec117d/Bye+Lisa%21+%281366+%C3%97+750+px%29+%28640+%C3%97+300+px%29.png?format=1500w'); background-repeat: no-repeat; background-size: 100%; } /* Insert Code for Mobile Above This Line */ }