Full width footer in boxed page

[manofmany]

Hi Guys,

I’m looking to have a full-width footer (100%) filling the whole window of the browser which will overlap the set boxed width of the page.

Essentially I’m looking to have the footer background colour run to the edge of the browser window but keep the existing width of the elements inside the footer (rather than stretch them out).

Unfortunately I can’t send a link as I’m working on a local server.

I found this answer on another support topic but the code doesn’t seem to work as the container falls within the boxed content I think.

#footer > .container {
width: 100%;
}

Any help is appreciated.

Kind regards,
Scott

[Kyle – SUPPORT]

Hi

You’ll need to be using a child theme, upload this into your child theme folder: https://www.dropbox.com/s/n0fm468ov8i6zlw/footer.php?dl=0

– Kyle

[manofmany]

Hi Kyle,

The footer.php file doesn’t appear to work so it just comes up with symbols instead of code similar to this:

511����������������

Any help would be much appreciated.

Cheers,
Scott

[Kyle – SUPPORT]

That’s odd, can I log in to see what you mean?

– Kyle

[manofmany]

Hi Kyle,

I’ve provided a screenshot for you.

Cheers,
Scott

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Sorry, I forgot to zip it:
https://www.dropbox.com/s/fnjezsrbyq92czc/footer.php.zip?dl=0

– Kyle

[manofmany]

Hi Kyle,

Thanks so much for looking into this for me.

It looks great but I was wondering if the footer elements could still be boxed and just the background of the footer be full width?

Currently all of the four columns in the footer are stretched to the edge.

Kind regards,
Scott

[Kyle – SUPPORT]

That’s not the case on mine, can you let me know when it is online so I can look at it for you

– Kyle

[manofmany]

I fixed it up. Thanks!

#footer > .container {
width: 1020px;
}

[Kyle – SUPPORT]

Ok great 🙂