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!