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 */
}