Is it possible to reduce the width of the footer without changing the width of the rest of the page content?

[core365]

Hi, is it possible to reduce the width of the footer without changing the width of the rest of the page content? I’ve done a section above the footer which is set within the page so it has white space to the left and right of it and I’d like the footer to match up with this so it’s the same width. Is this possible to do?

I’ve included a screen grab and I’ll put the URL in a secure note as it’s on a temp link at the minute.

Thanks!

[Prasant]

Hello @core365,

Thanks for asking.

You can add following CSS under X > Theme Options > CSS:

footer.x-colophon.bottom {
    width: 89%;
    margin: 0 auto;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[core365]

Hi, thanks for that! However, when you view it on various screen sizes, it doesn’t resize the same as the section above it, so it keeps displaying at different widths depending on the screen size.

Thanks!

[nabeel]

Hi again,

Please replace the previous code with the following code:

footer.x-colophon.bottom {
    width: 89%;
    margin: 0 auto;
    max-width: 1350px;
}

I tested the above code in different screen resolutions and it’s working fine. Don’t forget to clear all caches including your browser’s cache after adding the code.

Let us know how this goes!

[core365]

Great stuff, thanks! That’s exactly what I was after!

Many thanks for your help!

Cheers

[jade]

You’re most welcome!