[Resolved] Unexpected behaviour with Footer Widget Area Padding option

[Kevin]

Hi there,

I feel I am experiencing unexpected behaviour when setting the “Footer Width” and “Inner Footer Width” options in the customizer.

The “.footer-widgets-container” div expands past the maximum “Container Width” when the “Footer Width” option is set to “full”. I believe this is because the “Footer Widget Area Padding” settings are being applied to the “#footer-widgets” div instead of the “.footer-widgets-container” div.

I have attached two animated gifs displaying the symptom. I feel this is a bug because since the “Inner Footer Width” is set to “contained, the width should not exceed 1080px. The header and container respect this setting but not the footer.

I am trying to have all page elements (header, content, sidebar, footer) to all align on the same x axis.

https://imgur.com/a/SMsqM3C

GeneratePress theme 2.2.1
GP Premium plugin 1.7.7
WordPress 5.0.2

[Kevin]

Hey again,

I’ve spent some time really digging into this and believe I understand what is happening. The header and footer add padding to the primary div, but the content setting is being added to “.inside-article” and not “.content”.

Why does the content behave differently than the other elements?

[Tom]

Hi there,

Not sure I 100% understand yet.

The .footer-widgets-container element gets the width from your container width. It shouldn’t ever exceed that width. If the padding was applied to that element along with the width, it would exceed the width.

I just checked out your site and everything looks nicely aligned?: https://www.screencast.com/t/PRkPGBvKrbd

Let me know 🙂

[Kevin]

Sorry for the fragmented question. Allow me to start over…

In these screenshots, I have all padding options set to ’30px’. Why does the header, footer, content align differently at different viewport widths?

(my container width is set to 1080px)

[Tom]

By default, it’s not meant to align with your content. When there are two contrasting colors, it’s meant to align with the edge of the content container. For example: https://www.screencast.com/t/b39VNQ3a4kJ

The footer widget padding (left and right) kicks in once the browser resizes: https://www.screencast.com/t/52sFkz29d

Of course, this is only the default behavior. We can tweak it to do whatever we want with a little CSS. Let me know and I’ll be happy to help 🙂

[Kevin]

Your screenshots are helpful. I understand now. Thanks for the explanation. Great theme!

[Tom]

Thanks! Glad I could help 🙂

[Author]

Posts