Help with Weird Bottom Area on Landing Pages

brandi_sqspace · October 7, 2020

Site URL: https://www.brandingofficehours.com

Hey, everyone.

I'm having an issue on this page of my site. It's designed on LeadPages and then added by creating a new blank page in Squarespace, and injecting custom code into the Advanced section of its Page Settings.

The bottom of the page should look like this:

But instead looks like this:

In other words, the beige background should extend all the way to the bottom of the page, below that final text.

Here's my code:

<html>
  <head>
    <!-- Exit Intent Pop-Up (Edit in Leadpages) -->
<script src="https://embed.lpcontent.net/leadboxes/current/embed.js" async defer></script> <script>window.addEventListener('LPLeadboxesReady',function(){LPLeadboxes.setExitIntent('ur8FmQPQEgxgiS5Tzgo2Sk',{dontShowFor:'2d',domain:'brandistanley636.lpages.co'});});</script>
    <!-- Exit Intent Pop-Up (Edit in Leadpages) -->
<script src="https://embed.lpcontent.net/leadboxes/current/embed.js" async defer></script> <script>window.addEventListener('LPLeadboxesReady',function(){LPLeadboxes.setExitIntent('ur8FmQPQEgxgiS5Tzgo2Sk',{dontShowFor:'2d',domain:'brandistanley636.lpages.co'});});</script>
    <meta property="og:url" content="https://brandistanley636.lpages.co/fbs-landing/" />
    <link rel="opengraph" href="https://brandistanley636.lpages.co/fbs-landing/" />
    <script src="//brandistanley636.lpages.co/_/js/fbs-landing/"></script>
  </head>
  <style type="text/css">
  header, footer {display: none;}
section {padding-top: 0  !important;}
    div#siteWrapper {
    min-height: 0 !important;
}
</style>
</html>

What am I doing wrong here? Would love to know how to fix this here AND on other pages, as I frequently need to replicate this one page for various audiences.

Thanks, everyone!

tuanphan · October 8, 2020

Add to Home > Design > Custom CSS

section.section.css-13hpov6 {
    background: #f7f6f2;
}

brandi_sqspace · October 8, 2020

4 hours ago, tuanphan said:

section.section.css-13hpov6 { background: #f7f6f2; }

Amazing, @tuanphan. That worked on that page. Thank you so much!

BUT, still wondering how I get things to work if I duplicate that page in the future so I don't have to keep asking the forum the same thing every time I have a similar page 🙂. Here's a page I created as a test. What will I need to do in order to—

take away the extra space at the bottom (confused on this bc the Advanced section still has this):
```
    div#siteWrapper {
    min-height: 0 !important;
}
```
But that doesn't appear to be working.
and, make sure that the background area is all the right color (the beige)?
Especially curious about this part of your code, @tuanphan—
13hpov6
Is that some sort of Page ID? If I knew that of other pages I created in the future, would I be able to solve the same problem on those, as well, if I just duplicated the full code you gave me and then updated this portion to the new Page ID (or whatever it is)? If so, any help in directing me to where I'd find that in each page's code would be most helpful.

Thanks, all!

brandi_sqspace · October 9, 2020

@tuanphan, if you have any additional insights here, I'd be so grateful!

tuanphan · October 9, 2020

Flood here, will check the next few days.

tuanphan · October 10, 2020

18 hours ago, brandi_sqspace said:

@tuanphan, if you have any additional insights here, I'd be so grateful!

You can target last section, this will work on other pages

Edit Page > Add Code Block > Use this code

<style>
.page>section:last-child {
    background: red;
}
</style>

brandi_sqspace · October 10, 2020

3 hours ago, tuanphan said:
You can target last section, this will work on other pages

Edit Page > Add Code Block > Use this code
<style>
.page>section:last-child {
    background: red;
}
</style>

Thank you, this worked! Hope you're doing okay in all of the flooding 😕

tuanphan · October 12, 2020

Almost the entire city was flooded 1-2 meters :(

brandi_sqspace · October 15, 2020

On 10/12/2020 at 1:08 AM, tuanphan said:

Almost the entire city was flooded 1-2 meters 😞

Oh my goodness. I'm so sorry to hear that. Thank you for all the help, even admidst all that crisis. Sending you and your loved ones love.

brandi_sqspace · January 5, 2021

@tuanphan (and others!)

Hi again!

( @tuanphan, I hope you're doing okay after all the flooding?)

I'm having this same problem, again. I'm so annoyed that I can't seem to understand how to not spend hours of my time having to fix this problem every time I publish a new lead page.

Here's where I'm at this time around:
Here's the page in question. Note that it's not publicly linked yet bc the functionality won't work.

I have this in my custom CSS:

#collection-5ff38172f218a25ea6aaa0e1 section.section.css-1ml7zq4 {
    background-color: #f7f6f2;
}

And I have this in my Advanced Code for the page, same as other landing pages:

<!-- Remove Footer For Lead Page -->
<style type="text/css">
footer {display: none;}
section {padding-top: 0  !important;}
div#siteWrapper {min-height: 0 !important;}
</style>

On other pages like this one (like here), the only differences are that I have:

header, footer {display: none;} instead of just footer {display: none;} as I'd like to keep the header info on this lead page.
And, I have this extra set of code for all other lead pages to solve the issue (and just update the collection-id number for the particular page I'm trying to solve for:
```
#collection-5fdeab9d2baf317dc39a1dfe div#siteWrapper {
    display: none;
}
```
I don't, however, want that on the lead page I'm trying to fix (again, this one) because this time around I do want the top nav/site title to appear.

What am I missing? I would love to learn exactly what's happening so I can solve this on my own in the future (saving all of us time! 🙂). Can anyone help?

tuanphan · January 6, 2021

On 1/5/2021 at 7:16 AM, brandi_sqspace said:
@tuanphan (and others!)

Hi again!

( @tuanphan, I hope you're doing okay after all the flooding?)

I'm having this same problem, again. I'm so annoyed that I can't seem to understand how to not spend hours of my time having to fix this problem every time I publish a new lead page.

Here's where I'm at this time around:
Here's the page in question. Note that it's not publicly linked yet bc the functionality won't work.

I have this in my custom CSS:
#collection-5ff38172f218a25ea6aaa0e1 section.section.css-1ml7zq4 {
    background-color: #f7f6f2;
}
And I have this in my Advanced Code for the page, same as other landing pages:

<style type="text/css">
footer {display: none;}
section {padding-top: 0  !important;}
div#siteWrapper {min-height: 0 !important;}
</style>
On other pages like this one (like here), the only differences are that I have:
header, footer {display: none;} instead of just footer {display: none;} as I'd like to keep the header info on this lead page.
And, I have this extra set of code for all other lead pages to solve the issue (and just update the collection-id number for the particular page I'm trying to solve for:
#collection-5fdeab9d2baf317dc39a1dfe div#siteWrapper {
    display: none;
}
I don't, however, want that on the lead page I'm trying to fix (again, this one) because this time around I do want the top nav/site title to appear.
What am I missing? I would love to learn exactly what's happening so I can solve this on my own in the future (saving all of us time! 🙂). Can anyone help?

Looks fine here?

brandi_sqspace · January 6, 2021

17 minutes ago, tuanphan said:

Looks fine here?

Nope—those white squares on the bottom left and bottom right are what I'm trying to get rid of. 😕

tuanphan · January 7, 2021

16 hours ago, brandi_sqspace said:

Nope—those white squares on the bottom left and bottom right are what I'm trying to get rid of. 😕

Add to 4foundations Header

<style>
  div#siteWrapper {
    background: #f7f6f2;
}
</style>

brandi_sqspace · January 7, 2021

6 hours ago, tuanphan said:
Add to 4foundations Header
<style>
  div#siteWrapper {
    background: #f7f6f2;
}
</style>

As always, you're amazing. That worked, thank you.

tuanphan · January 8, 2021

19 hours ago, brandi_sqspace said:

As always, you're amazing. That worked, thank you.

I see on tablet.

body#collection-5ff38172f218a25ea6aaa0e1 {
    background: #f7f6f2;
}

brandi_sqspace · January 8, 2021

4 hours ago, tuanphan said:
I see on tablet.
body#collection-5ff38172f218a25ea6aaa0e1 {
    background: #f7f6f2;
}

Well, whoops. Thanks for catching that. Should I put that into Design > Custom CSS or the Page Settings > Advanced > Advanced Page Code Injection?

tuanphan · January 8, 2021

51 minutes ago, brandi_sqspace said:

Well, whoops. Thanks for catching that. Should I put that into Design > Custom CSS or the Page Settings > Advanced > Advanced Page Code Injection?

Page Header

<style>
body {
    background: #f7f6f2;
}
</style>

brandi_sqspace · January 8, 2021

5 minutes ago, tuanphan said:
Page Header
<style>
body {
    background: #f7f6f2;
}
</style>

Got it. Do you see the issue on tablet now? I only added this body code, and not the collection code you mentioned above.

tuanphan · January 10, 2021

On 1/8/2021 at 10:00 PM, brandi_sqspace said:

Got it. Do you see the issue on tablet now? I only added this body code, and not the collection code you mentioned above.

You can right click anywhere > Inspect Element > Choose iPad in top of browser. You can preview your site in tablet

Help with Weird Bottom Area on Landing Pages

Recommended Posts

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Archived

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources