MichV Posted December 6, 2023 Share Posted December 6, 2023 Hello! I was hoping that someone would be able to assist me. I have used the code below to create a transparent footer, which works, except that it causes the footer to overlap with the rest of the page content (on all pages). I can manage this on the desktop version by adding spacers, but the mobile is a mess as it would need a huge spacer, making the desktop look bad. Is there something I can adjust in the code to prevent this? Here is the code that I've been using for the footer: body footer#footer-sections { position: absolute; bottom: 0; left: 0; z-index: 999; width: 100%; } body footer.sections section, body footer.sections .section-background, body .section-border { background: transparent !important; } Thank you!! Link to comment
melody495 Posted December 6, 2023 Share Posted December 6, 2023 9 minutes ago, MichV said: body footer#footer-sections { position: absolute; bottom: 0; left: 0; z-index: 999; width: 100%; } Hi @MichV What behaviour are you trying to achieve with this block of code? This is what is likely what is causing the overlap. I don't believe this code is needed for setting the footer background to be transparent. -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd e: melody@melodylee.tech 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
MichV Posted December 6, 2023 Author Share Posted December 6, 2023 Hello @melody495 Thank you so much for your speedy reply! Appreciate it very much! I have removed the code, which solved the position issue! Thank you! However, it looks like the background of the site (the blue) doesn't continue to the end of the footer after making this change. Not sure how to adjust this.. Link to comment
melody495 Posted December 6, 2023 Share Posted December 6, 2023 3 minutes ago, MichV said: I have removed the code, which solved the position issue! Thank you! 👍 4 minutes ago, MichV said: However, it looks like the background of the site (the blue) doesn't continue to the end of the footer after making this change. Not sure how to adjust this.. Can you change the code from "transparent" to "blue"? -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd e: melody@melodylee.tech 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
melody495 Posted December 6, 2023 Share Posted December 6, 2023 7 minutes ago, MichV said: However, it looks like the background of the site (the blue) doesn't continue to the end of the footer after making this change. Not sure how to adjust this.. Can you describe what you are trying to achieve with the footer? Setting background to transparent will mean there is nothing to show as a background. But I'm guessing setting it to blue isn't what you want either? 🤔 -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd e: melody@melodylee.tech 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
MichV Posted December 6, 2023 Author Share Posted December 6, 2023 @melody495 yeah! I need to be transparent because each page has a different bg colour, and another page has a video which plays behind the whole block etc - the client is very happy with that. So I'm thinking maybe it does need to be positioned over the page, but perhaps it's a padding issue? 😅 Link to comment
melody495 Posted December 6, 2023 Share Posted December 6, 2023 (edited) Please share your website url. Please put the code back to your original so I can see what you are referring to and what the problem is. Edited December 6, 2023 by melody495 -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd e: melody@melodylee.tech 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment