Replace index Slideshow Gallery with custom image for mobile CSS Bryant

Bryant theme: I have a Slideshow Gallery inserted to force a full screen banner slideshow on the home/index page for desktop which works great, but not on mobile; the client would like a single static image for mobile views and nothing works.

DEV url is: https://jenniferpurdue.squarespace.com
Password: JENP

As a stop gap, I set the slideshow gallery for mobile to display: none; as such:

@media only screen and (max-width: 812px) { .sqs-gallery-block-slideshow { display: none;
} 
  }

Removing that CSS displays the full slideshow for mobile again, even after adding the following code in:

@media only screen and (max-width: 812px) {
       #home {
              background-image:url('https://static1.squarespace.com/static/5d6ed3c5377e890001aee163/t/5dcec8b5b5a1dd2c238cf24f/1573832887083/8724%2Brosewood%2Bave%2Bwest-large-003_LIGHTEST.jpg');
         }
    } 

and this, with page id: 

@media only screen and (max-width: 812px) {
#collection-5d6ed731fb91660001ed3ead {

background-image:url('https://static1.squarespace.com/static/5d6ed3c5377e890001aee163/t/5dcec8b5b5a1dd2c238cf24f/1573832887083/8724%2Brosewood%2Bave%2Bwest-large-003_LIGHTEST.jpg');
         }
    }

Screenshots: I would like to use the attached image seen in the desktop view (which is #5 in the gallery) as the static banner image for mobile view. I have the the page's media image set as this image as well.

Help, this is driving me mad and time is ticking — anyone? Many thanks in advance!

Did you find a solution?

I am having the same problem right now 😞

On 12/13/2021 at 9:32 AM, Guillermomiranda said:

Did you find a solution?

I am having the same problem right now 😞

 

 

Can you share link to page where you have problem on your site? We can check easier