Jump to content

Hide one gallery slide show on mobile

Recommended Posts

  • Replies 7
  • Views 1.3k
  • Created
  • Last Reply

Figuered this out last night, used this exact line!

Used the data sections to hide one on mobile and one on desktop. Works perfect if you want a different mobile slide show and a desktop. 

Code is below if anyone needs the same help. 

 

//Hide desktop slide show on mobile//
@media only screen and (max-width: 640px)

   [data-section-id="sectionIDhere"]
   {
        display: none;
    }
}

//Hide mobile slide show on desktop//

@media only screen and (min-width: 641px)

   [data-section-id="sectionIDhere"]
   {
      display: none;
   }
}
 

Link to comment
15 hours ago, MaverivckMPP said:

Figuered this out last night, used this exact line!

Used the data sections to hide one on mobile and one on desktop. Works perfect if you want a different mobile slide show and a desktop. 

Code is below if anyone needs the same help. 

 

//Hide desktop slide show on mobile//
@media only screen and (max-width: 640px)

   [data-section-id="sectionIDhere"]
   {
        display: none;
    }
}

//Hide mobile slide show on desktop//

@media only screen and (min-width: 641px)

   [data-section-id="sectionIDhere"]
   {
      display: none;
   }
}
 

SS 7.1 use max-width:767px 

and min-width:768px

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
6 hours ago, e_robertson said:

I'm keen to do something similar on this website: www.felicitymara.co.uk

How do I find the data-section-id for the gallery?

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@tuanphan Thank you. Do you know why this isn't working for me?

/*Hide desktop slide show on mobile*/
@media only screen and (max-width: 767px)
{ 
   [data-section-id="#block-yui_3_17_2_1_1594283337848_3771"]
   {
        display: none !important;
    }
}

/*Hide mobile slide show on desktop*/

@media only screen and (min-width: 768px)
{ 
   [data-section-id="#block-yui_3_17_2_1_1594283751431_4609"]
   {
      display: none !important;
   }

The website is www.felicitymara.co.uk and the password is felicity123

Link to comment

I figured this one out. The code now reads:

/*Hide desktop slide show on mobile*/
@media only screen and (max-width: 767px)
{ 
#block-yui_3_17_2_1_1594283337848_3771
   {
        display: none !important;
    }
}

/*Hide mobile slide show on desktop*/

@media only screen and (min-width: 768px)
{ 
#block-yui_3_17_2_1_1594283751431_4609
   {
      display: none !important;
   }
}

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.