Different background photo for mobile

sense8linkedsense8linked Registered Users Posts: 18 Big grins

Hi, is there a way for me to specify a different background photo (than PC) in a specific gallery? Here's an example:

https://www.darkshadowsplay.com/DarkShadows/Dramatis-Personae/

Many of my galleries have a background photo that displays correctly on a PC, but not on a mobile.

Thanks,
Jana

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited November 16, 2019

    You will need to know the .sm-page-node number for each Gallery Background, but this will do it. You will need to replace background-image-here for the actual image URL. Don't remove the quotes ' ' .

    That is the actual page-node for your Gallery you posted above. I added a fictitious second page-node (.sm-page-node-xxxxxx) so you can see how you can add more just by adding a comma.

    @media only screen and (max-width: 736px) {
    
      .sm-page-node-5QZmhM .sm-tiles-cover .sm-tile-content,
      .sm-page-node-xxxxxx .sm-tiles-cover .sm-tile-content {display: none;}
    
      .sm-page-node-5QZmhM.sm-page-hasbackground > .sm-page-background,
      .sm-page-node-xxxxxx.sm-page-hasbackground > .sm-page-background {background-size: 736px;}
    
      .sm-page-node-5QZmhM.sm-page-hasbackground > .sm-page-background {background-image: url( 'background-image-here' );}
      .sm-page-node-xxxxxx.sm-page-hasbackground > .sm-page-background {background-image: url( 'background-image-here' );}
    
    }
    

    Use a Web Tool to locate the page-node, highlighted in gray:

  • sense8linkedsense8linked Registered Users Posts: 18 Big grins
    edited November 18, 2019

    Wow, thanks Mike, that's super clear. I will try that soon (can't right now). Exciting!!

  • sense8linkedsense8linked Registered Users Posts: 18 Big grins

    Wow, THANKS Mike, that's super clear. I'll try it soon (can't get to it today) ~Jana

Sign In or Register to comment.