Archived topic
Footer widgets given -40px left margin - is this deliberate?
7 replies · Started by Nik on April 5, 2021
I'm working on a new site and my three footer widgets are off centre, with the first being pushed off the left edge of the screen. This is being caused by something in GPP:
.site-footer .footer-widgets-container .inside-footer-widgets {
margin-left: -40px;
}I can fix this in my child theme but I wondered if it was deliberate and, if so, what's the purpose? In case it relates to something else that will become a problem if I just override it.
(It's my first GPP site using the flexbox option, if that makes any difference.)
Hi Nik,
Yes - the negative margin is needed to align things when using Flexbox.
This site is using the same thing as well.
Let me know if this answers your question.
Hi Leo, thanks for the reply. So why are my widgets off centre and off the side of the screen? I haven't done much more than drop some widgets into the widget areas and set padding in the customiser.
Hi there,
you have this CSS in Customizer > Additional CSS that is causing the issue:
.site-footer .footer-widgets-container .inner-padding {
padding: 0 15px 0 15px;
}Hi David, thank you. So I guess there's two questions:
1. Even when I comment that out, the three widgets are still left of centre - the footer-widget-1 div always touches the left screen edge but footer-widget-3 always falls short of the right edge. (Screenshots in private). What's the cause?
2. I'm new to the flexbox structure - where would be the right place nowadays to set a margin/padding to have a specific gutter of, e.g. 30px between divs/columns? (And in turn, make the content width of each one slightly narrower rather than creating overspill)
Thanks so much. :)
The GP Footer is a rather simple affair - it has a default column gap of 40px ( set using padding ) and each widget will occupy a fraction of the container so 3 widgets, they all occupy 1/3rd of the space.
If you want to adjust the column gap then like you have added the padding of 15px you would also need to adjust the offset margin CSS:
.site-footer .footer-widgets-container .inside-footer-widgets {
margin-left: -15px;
}However, if you want to have more fine control over the footer then you may want to check out using the Block Element and GenerateBlocks:
https://docs.generatepress.com/article/block-element-overview/
You can then hook in your own custom footer to the before_footer hook. With the GenerateBlocks plugin you can then control the width of each container, and set your own padding and column gaps.
Thanks David. I'll have a play and do it another way as you suggest if needed.
Let us know how you get on - glad to be of help.
