Jump to content

Transparent background in footer causing an overlap with the page content

Recommended Posts

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

 


 image.thumb.png.3a708c8ce1460739a2db011fc2eed9dd.png

Link to comment
  • Replies 6
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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 Website Developer
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.
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment

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

Screenshot 2023-12-06 at 15.44.14.png

Link to comment
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 Website Developer
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.
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment
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 Website Developer
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.
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment

@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

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

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
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.
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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