Transparent background in footer causing an overlap with the page content

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

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. 

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

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

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

@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? 😅

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.