Hide section in desktop

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.

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

That worked perfectly. Thank you Tuan! The tool you linked to is a big help too.

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

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.

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

Sending you a message now

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

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

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;
}

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?

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

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;
}