Footer padding

[Simon]

Hi,

I may have come across a possible issue:

Footer Widget Area Padding is applied to the Footer Width class ‘.footer-widgets‘. When both footer width settings are set to “Full Width” the padding works as expected, but when using a contained inner footer, the padding is still applied to the full width footer container. This makes it virtually impossible to vertically line up the content and footer at the left edge.

Should the Footer Widget Area Padding be applied to class ‘.footer-widgets-container‘, in the same way the Header Padding is applied to class ‘.inside-header‘.

Also, for the padding to work on a contained-width site, ‘box-sizing: border-box;‘ needs to be set on the ‘inside-‘ divs.

This all came about because the header/content/footer dont line up verically, the content padding is ALWAYS applied, but the other padding is dependant on the site width settings.

Simon

GeneratePress 2.0.1

GP Premium 1.5.6

[Tom]

Hi Simon,

The inner contained footer widget area is built to align with the edge of the content box above it. A good example is this site we’re on right now – notice how the footer widget aligns with the white content box above it?

If it had padding to the left, the alignment would look off (this was an issue on older versions of GP).

That being said, if you have a layout where it needs that padding, we can achieve it quite easily with some CSS:

.site-footer .footer-widgets-container .inside-footer-widgets {
    margin-left: 0;
}

I try not to rely on box-sizing too much, as it’s not supported in IE < 11.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Simon]

Hi,

On a contained width site, like this one, it looks right, especially with the contrasting background colour.
If you change the background color to white, it looks wrong and needs the content padding removing.

Thanks,

Simon

[Tom]

I agree, it’s hard for the code to know in this case without adding more PHP logic. I’ll look into it to see if I can make the adjustment automatically without affecting performance.

For now, the CSS above should do it if you’re using the same background colors.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts