Jump to content

Replace index Slideshow Gallery with custom image for mobile CSS Bryant

Recommended Posts

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! 1485187400_ScreenShot2019-11-15at12_59_51PM.thumb.png.518a40ee024e17a3c0e3e470b08bcf5b.png297456054_ScreenShot2019-11-15at12_59_28PM.thumb.png.daa6cbea1914c97df757dccad518d0bb.png

Link to comment
  • 2 years later...
  • Replies 2
  • Views 751
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.