Jump to content

Hide section in desktop

Recommended Posts

Hi,

I have 2 sections on a page. Top is for desktop, bottom is for mobile. I successfully hid the top section in mobile view thanks to code found here. I now need to hide the bottom section in desktop view.

This is the code that I used to hide for mobile

/* this code for tablet - mobile */

@media screen and (max-width:640px) {

  [data-section-id="5f168cff92f0a40baa399208"]{

    display: none;

  }

}

Now trying to hide this section on desktop

<article class="sections" data-page-sections="5f168bd06a769b073e0558ae" id="sections">

Thanks, I appreciate your help.

Link to comment

Add to Home > design > Custom CSS

/* Hide this on Mobile */
@media screen and (max-width:767px) {
	[data-section-id="enter-id-here"] {
		display: none;
	}
}
/* Hide this on Tablet - Desktop */
@media screen and (min-width:768px) {
	[data-section-id="enter-id2-here"] {
		display: none;
	}
}

Find data section id with this tool. 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

If you are looking to hide a complete section and show it with a button or text, check out this plugin: https://www.fusehub.ca/expand-sections

I run FuseHub Creative Group, a syndicate of creatives from all over the world with one common goal - to develop creative and strategic solutions for ambitious organizations, and develop cool plugins which you can find on the SQS Mods platform - Circle Members always get a 10% discount with this code: SQSMOD10.

Link to comment
  • 1 year later...
On 8/28/2022 at 6:50 AM, ZABS860 said:

Is it possible to show a section on Mobile AND tablet but not desktop? 

 

I'm using this to show a spacer on mobile but hide it on desktop, but I really need it to show on tablet as well.

Yes. If you share link to page where you use section, we can give some code to achieve this

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
  • 1 year later...
  • 2 months later...
On 10/11/2023 at 4:43 PM, krtsfbk said:

Hi there, is it possible to keep a section but hide BOTH on mobile and tablet? 

Just use this CSS code

@media screen and (max-width:991px) {
	[data-section-id="enter id here"] {
		display: none !important;
}
}

Use this free tool to find data section id https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

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

Hello, the landing page for each blog provides a built-in summary of all the posts. I'd like to hide this section and design my own summary of blog posts that's not limited to Squarespace's design. When I use the CSS code (below), the content within my blog posts starts disappearing too. Is there a way I can hide this section without my content disappearing? Please help 

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

Link to comment
14 hours ago, danicasamuel said:

Hello, the landing page for each blog provides a built-in summary of all the posts. I'd like to hide this section and design my own summary of blog posts that's not limited to Squarespace's design. When I use the CSS code (below), the content within my blog posts starts disappearing too. Is there a way I can hide this section without my content disappearing? Please help 

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

Can you share link to this page?

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
On 3/21/2024 at 10:06 AM, danicasamuel said:

Hi @tuanphan thanks for the reply. The link is https://www.vainqueurmag.ca/runway

You can use this new CSS code

body.view-list section[data-section-id="631be0428f71a31aacf70a54"] {
    display: none;
}

 

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
  • 7 months later...

I am using this code and they seem to be working against each other. Both sections now show up on mobile and desktop. If I only use the top code then it hides the desktop successfully on mobile but the mobile still shows on desktop. Please help...

/* Hiding the desktop header on mobile*/
@media screen and (max-width: 767px) {section[data-section-id="6706c91ce1fdfb327f5d0e13"] {
display:none !important;
}
  /* Hiding the mobile header on desktop*/
  @media screen and (min-width: 768px) {section[data-section-id="6706c91ce1fdfb327f5d0e13"] {
display:none !important;
}

Link to comment
4 hours ago, josephjamesphot said:

I am using this code and they seem to be working against each other. Both sections now show up on mobile and desktop. If I only use the top code then it hides the desktop successfully on mobile but the mobile still shows on desktop. Please help...

/* Hiding the desktop header on mobile*/
@media screen and (max-width: 767px) {section[data-section-id="6706c91ce1fdfb327f5d0e13"] {
display:none !important;
}
  /* Hiding the mobile header on desktop*/
  @media screen and (min-width: 768px) {section[data-section-id="6706c91ce1fdfb327f5d0e13"] {
display:none !important;
}

You should share site url, we can check easier, or follow this

 

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

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.