Is it possible to Hide an Entire Section from my Homepage and Unhide for later use?

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/

Hello, Is it possible to completely hide a section from both Desktop, mobile and tablet - basically so it is hidden from all devices?

When I design certain sections on my homepage, I often feel like I could keep this design for later, without deleting it and starting the work all over again.

I don't think Squarespace has a feature you can just toggle sections on/off?

My site url = https://bluebird-porcupine-yzdg.squarespace.com/

My Pword = bluebird

Best,

Faiz

26 minutes ago, scholarsayze said:

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/

Hello, Is it possible to completely hide a section from both Desktop, mobile and tablet - basically so it is hidden from all devices?

When I design certain sections on my homepage, I often feel like I could keep this design for later, without deleting it and starting the work all over again.

I don't think Squarespace has a feature you can just toggle sections on/off?

My site url = https://bluebird-porcupine-yzdg.squarespace.com/

My Pword = bluebird

Best,

Faiz

You can hide it temporary by finding section id

Squarespace ID Finder - Chrome Web Store (google.com)

Copy the id and replace in this snippet, it helps hide the section on the page but leave it on edit mode

body:not(.sqs-edit-mode) section-id-found {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.sqs-edit-mode section-id-found {
  opacity: 0.5 !important;
}

Thank you so much Bangank36. Thanks for the ID Finder!!

I copied the code and added the first section ID to test but I'm not sure I have done this correctly, please can you double check:

body:not(.sqs-edit-mode) 5f8fea6196d2c93c2a238f81 {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.sqs-edit-mode 5f8fea6196d2c93c2a238f81 {opacity: 0.5 !important;}

Thank you

7 minutes ago, scholarsayze said:

Thank you so much Bangank36. Thanks for the ID Finder!!

I copied the code and added the first section ID to test but I'm not sure I have done this correctly, please can you double check:

 

body:not(.sqs-edit-mode) 5f8fea6196d2c93c2a238f81 {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.sqs-edit-mode 5f8fea6196d2c93c2a238f81 {opacity: 0.5 !important;}

 

Thank you

Copy the whole content

Oh My!!! That's AWESOME! That's exactly what I need thank you SO much!!

Thank you Bangank36 💯

Hello, is it possible to have a similar code to hide a section either:

1. on desktop
2. on mobile/tablet

But still available for edit mode. Two separate codes would be great.

I find that one design works better on Desktop than Mobile/Tablet and vice-versa.

Many thanks.

Best,

Faiz

1 hour ago, scholarsayze said:

Hello, is it possible to have a similar code to hide a section either:

1. on desktop
2. on mobile/tablet

But still available for edit mode. Two separate codes would be great.

I find that one design works better on Desktop than Mobile/Tablet and vice-versa.

Many thanks.

Best,

Faiz

I assume you got the correct id from the previous instruction

/* Hide the section on mobile */
@media only screen and (max-width: 768px) {
    body:not(.sqs-edit-mode) section-id-found {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
    }
}
/* Hide the section on desktop */
@media only screen and (min-width: 768px) {
    body:not(.sqs-edit-mode) section-id-found {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
    }
}

You will need to get 2 sections id and replace accordingly in section-id-found, they will also show on edit mode

Thank you so much! So do I add the full ID code copied like this:

section[data-section-id="5fe32430ede60b2fac33f917"]

So the code should be like this to hide on mobile?

/* Hide the section on mobile */
@media only screen and (max-width: 768px) {
    body:not(.sqs-edit-mode) section[data-section-id="5fe32430ede60b2fac33f917"] {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
    }
}

1 hour ago, scholarsayze said:

Thank you so much! So do I add the full ID code copied like this:

section[data-section-id="5fe32430ede60b2fac33f917"]

So the code should be like this to hide on mobile?

/* Hide the section on mobile */
@media only screen and (max-width: 768px) {
    body:not(.sqs-edit-mode) section[data-section-id="5fe32430ede60b2fac33f917"] {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
    }
}

Yes

Thank you for confirming,

I tried the code for my first section (under my homepage header) and it didn't seem to work - am I missing something out?

/* Hide the section on mobile */
@media only screen and (max-width: 768px) {
    body:not(.sqs-edit-mode) section[data-section-id="5f8fea6196d2c93c2a238f81"] {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
    }
}

Many thanks.

On 12/23/2020 at 11:27 PM, scholarsayze said:

Thank you for confirming,

I tried the code for my first section (under my homepage header) and it didn't seem to work - am I missing something out?

/* Hide the section on mobile */
@media only screen and (max-width: 768px) {
    body:not(.sqs-edit-mode) section[data-section-id="5f8fea6196d2c93c2a238f81"] {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
    }
}

 

Many thanks.

Have you solved this yet?

Yes I couldn't get it to work but I had to make a slight adjustment here's the code to hide on mobile from 768px to 991px:

/* HIDES HEADER SECTION 1 FROM MOBILE BUT LEAVES IN EDIT MODE*/

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

    body:not(.sqs-edit-mode) section[data-section-id="5fe9eb34ba5cdf3765c10016"] {

      display: none !important;

      visibility: hidden !important;

      opacity: 0 !important;

    }

body.sqs-edit-mode section[data-section-id="5fe9eb34ba5cdf3765c10016"] {opacity: 0.5 !important;}

}

/*HIDES HEADER SECTION 2 FROM DESKTOP BUT LEAVES IN EDIT MODE*/

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

    body:not(.sqs-edit-mode) section[data-section-id="5fe9e4d44d160f63a675dc59"] {

      display: none !important;

      visibility: hidden !important;

      opacity: 0 !important;

    }

body.sqs-edit-mode section[data-section-id="5fe9e4d44d160f63a675dc59"] {opacity: 0.5 !important;}

}

I believe this works perfectly well now thank you all.

Thanks for this question - this is exactly the function I'm looking for on my own site (though I'd like to be able to hide sections not on the homepage, but within a password-protected page for members).  However, pasting the code above  (using ID Finder) to hide a section (but keep it visible while editing) doesn't seem to work.

I wonder if I'm correctly inserting code. Just to be clear, this should be embedded within the section I want to hide?

Many thanks.

21 hours ago, roottherapymaine said:

Thanks for this question - this is exactly the function I'm looking for on my own site (though I'd like to be able to hide sections not on the homepage, but within a password-protected page for members).  However, pasting the code above  (using ID Finder) to hide a section (but keep it visible while editing) doesn't seem to work.

I wonder if I'm correctly inserting code. Just to be clear, this should be embedded within the section I want to hide?

Many thanks.

Can you share link to homepage?

Thank you! Homepage is http://roottherapymaine.com.

@roottherapymaine

So it sounds like the code is working, kind of, but the issue is that it also hides the section when you are trying to edit?

If that is the case proceed the selector with the following.

body:not( .sqs-edit-mode ) 

You'll want a space after the closing parenthesis in most cases.

Let us know how it goes.

Thanks @creedon - not quite; the issue is that nothing seems to happen other than that the code itself appears once the page is saved (that is, visible to the public). I wonder if I'm entering the code incorrectly; I've been selecting a "code" block within the section I wish to hide (to no avail...)

@roottherapymaine

Second guess is that you are clicking the slide button for Display Source.

Instead of more guessing could you set up a test page, enter your code and then give us the URL for that page? Then we can see what is going on.

Thank you @creedon - after doing a bit of research, I'm wondering now if the issue may be that I have a personal account rather than a commerce account. If you think that's not a dealbreaker, I'll go ahead and set up a test page.

If the code is CSS only then it should work on the personal plan.

Hi @creedon - Finally returning to this query. It seems that on a personal plan I'm not able to paste any code in the general page settings. I've tried to paste code within the body of the section I'd like to hide, but - as you can see - the code itself is visible, with no other effect.

Here is the test page I created: https://www.roottherapymaine.com/copy-writing-awake-copy

Grateful for any insight you might have, though wonder if this is an issue with my plan level.

@roottherapymaine

When putting CSS in a code block it needs to be wrapped in a style tag. Also you need to make sure the display source is off.

You could also put the code in Design > Custom CSS. Without the style tag.

Let us know how it goes.

Hi @creedon - a belated to note to say THANK YOU!! Very happy to report that the above code did indeed work, and grateful for your help in navigating this.

Quick question. Is there any way to hide the section based on user location?