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

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

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

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

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?

@ninjahh

It may be possible. It would require the use of Javascript and using one of the ip geo-location services.

hey @bangank36 and @creedon I'm hvaing trouble removing one section of the footer on the home page.  Hoping you could take a look at it for me?  www.tlastmarks.com  password is: 20222023  

Also if anyone can figure out this weird footer situation that's happening in portrait ipad mode?  You'll have to view it (navy blue section and section above it) while reducing your browser size...  I've combed through my CSS and can't find the culprit 😞

9 minutes ago, DevonHarris said:

I'm hvaing trouble removing one section of the footer on the home page.

Which section? Can you provide a picture?

The usual way to hide a section on the homepage would be a selector that starts with .homepage. So you'd end up with something like the following.

.homepage [data-section-id="62f6c16b4066023472778cdf"] {

  display : none;
  
  }

Quote

Also if anyone can figure out this weird footer situation that's happening in portrait ipad mode?

The issue is probably related to overlapping min/max width values. When you are switching sections on and off the values should not overlap. The settings you have are saying at 780 px hide both sections at the same time.

@media screen and (min-width: 780px) {
  section[data-section-id="62f2662e33a00e73740c9d72"] {
    display:none !important
  }
}

@media screen and (max-width: 780px) {
  section[data-section-id="62f1d59773499aedccb5d1c9"] {
    display:none !important
  }
}

Let us know how it goes.

@Beyondspace just wanted to say THANK YOU 🙏🙏🙏. I am used to LeadPages and there it is soooo easy to hide sections. But while I do love SquareSpace, I had a scenario where I needed to hide or show sections, and your code is so perfect. 

I love how it makes it semi-transparent in edit mode. Unlike other code snippets I found which hide it completely.

Wow, thank you for this.  This is great when the site is live and I have to do live updates, I can still work on it but no one sees it and then just remove the code.  Awesome