- This topic has 6 replies, 2 voices, and was last updated 4 years, 5 months ago by Tom.
December 24, 2018 at 2:05 pm #764923Kevin
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.
GeneratePress theme 2.2.1
GP Premium plugin 1.7.7
WordPress 5.0.2December 24, 2018 at 3:18 pm #764934Kevin
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?December 24, 2018 at 4:23 pm #764951TomLead DeveloperLead Developer
Not sure I 100% understand yet.
.footer-widgets-containerelement 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 🙂December 25, 2018 at 8:51 am #765261Kevin
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)December 26, 2018 at 12:03 am #765562TomLead DeveloperLead Developer
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 🙂December 27, 2018 at 7:51 am #766753Kevin
Your screenshots are helpful. I understand now. Thanks for the explanation. Great theme!December 27, 2018 at 9:32 am #766821TomLead DeveloperLead Developer
Thanks! Glad I could help 🙂
- You must be logged in to reply to this topic.