Jump to content

CSS code to hide gallery block on mobile and desktop **7.0**

Go to solution Solved by Ziggy,

Recommended Posts

Posted

Hello! I am trying to hide the grid gallery on mobile and only show it on desktop, AND hide the slideshow on desktop and only show it on mobile. 

Can someone help me with the snippet? I've found a few very simple ones, but for some reason they aren't working. This is what I'm using:

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1717755367785_29074 .intrinsic {
    display: none;
}
}

 

Thanks in advance!

Posted

Can you share your website URL, or at very least the block ID for the gallery you want to hide on desktop and the block ID for the gallery you want to hide on mobile?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Posted

Hi Ziggy! Thanks for the quick reply.

This is the block id for the grid gallery I want to hide on mobile is:
#block-yui_3_17_2_1_1717755367785_29074

This is the block id for the slideshow gallery I want to hide on desktop is: 
#block-yui_3_17_2_1_1717752723238_21680 

  • Solution
Posted

Use this in Custom CSS:

// Hide on mobile
@media only screen and (max-width:767px) {
  #block-yui_3_17_2_1_1717755367785_29074 {
    display:none;
  }
}
// Hide on desktop
@media only screen and (min-width:768px) {
  #block-yui_3_17_2_1_1717752723238_21680 {
    display:none;
  }
}

Let me know if that works.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.