brandi_sqspace Posted October 7, 2020 Share Posted 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! Link to comment
tuanphan Posted October 8, 2020 Share Posted October 8, 2020 Add to Home > Design > Custom CSS section.section.css-13hpov6 { background: #f7f6f2; } 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
brandi_sqspace Posted October 8, 2020 Author Share Posted 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! Link to comment
brandi_sqspace Posted October 9, 2020 Author Share Posted October 9, 2020 @tuanphan, if you have any additional insights here, I'd be so grateful! Link to comment
tuanphan Posted October 9, 2020 Share Posted October 9, 2020 Flood here, will check the next few days. 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
tuanphan Posted October 10, 2020 Share Posted 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> 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
brandi_sqspace Posted October 10, 2020 Author Share Posted 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 😕 Link to comment
tuanphan Posted October 12, 2020 Share Posted October 12, 2020 Almost the entire city was flooded 1-2 meters :( 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
brandi_sqspace Posted October 15, 2020 Author Share Posted 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. Link to comment
brandi_sqspace Posted January 5, 2021 Author Share Posted 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? Link to comment
tuanphan Posted January 6, 2021 Share Posted 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: <!-- 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? Looks fine here? 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
brandi_sqspace Posted January 6, 2021 Author Share Posted 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. 😕 Link to comment
tuanphan Posted January 7, 2021 Share Posted 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> 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
brandi_sqspace Posted January 7, 2021 Author Share Posted 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. Link to comment
tuanphan Posted January 8, 2021 Share Posted 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; } 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
brandi_sqspace Posted January 8, 2021 Author Share Posted 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? Link to comment
tuanphan Posted January 8, 2021 Share Posted 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> 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
brandi_sqspace Posted January 8, 2021 Author Share Posted 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. Link to comment
tuanphan Posted January 10, 2021 Share Posted 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 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.