Jump to content

Help with Weird Bottom Area on Landing Pages

Recommended Posts

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:

1896339606_ScreenShot2020-10-07at1_48_00PM.thumb.png.a95851412252658fec63435d8994478c.png

 

 

 

 

 

 

 

But instead looks like this:

1921845191_ScreenShot2020-10-07at1_46_46PM.thumb.png.78b3521fe82949a37ef1a3a94565525b.png

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!

Link to comment
  • brandi_sqspace changed the title to Help with Weird Bottom Area on Landing Pages
  • Replies 18
  • Views 1.1k
  • Created
  • Last Reply
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— 

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

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

Link to comment
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>

 

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

@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:

  1. header, footer {display: none;} instead of just footer {display: none;} as I'd like to keep the header info on this lead page.
  2. 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?

Link to comment
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:


<!-- 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:

  1. header, footer {display: none;} instead of just footer {display: none;} as I'd like to keep the header info on this lead page.
  2. 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?

image.thumb.png.27daa90e6fb213109163b67ea3ec2be7.png

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

 

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

 

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

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

Archived

This topic is now archived and is closed to further replies.


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