Image Size Issues: Hide/Replace Banner image for Tablet and Mobile

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

}

You mean Bye Lisa Image? You want to resize it on tablet/mobile or replace with above new image? Both case, we can also give the code

On 2/21/2022 at 2:00 AM, tuanphan said:

You mean Bye Lisa Image? You want to resize it on tablet/mobile or replace with above new image? Both case, we can also give the code

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

Thanks for the help!

I would also like to do this exact thing. Any help here would be greatly appreciated

On 2/22/2022 at 10:52 PM, StevenMcCarty said:

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

 

Thanks for the help!

The url doesn't work. Add this to Design > Custom CSS

/* home-1 image on tablet mobile */
@media screen and (max-width:900px) {
body#collection-620549c79509ba40c53e4392 #banner-wrapper img {
    content: url(https://cdn.pixabay.com/photo/2020/04/08/06/55/elephant-5015964__480.jpg);
}
}

On 2/23/2022 at 9:58 AM, katxq said:

I would also like to do this exact thing. Any help here would be greatly appreciated

 

What is your site url?