No footer template: bottom section has a gap

Beta
#1

Hi!

When the template is set to Blank - no container, | No Header, No Footer the bottom most section has a gap at the bottom, if bottom padding set to zero. (When there are more sections, and this one touches the bottom of the viewport).

Thanks!

#2

Confirmed. Looks like it is proportionate to the vertical gap size of the row.

#3

Howdy, @Misho! Thanks for sharing this. After taking a look at it, it does indeed seem to be related to how we have the updated Row Element setup to handle gaps.

While the new CSS Grid spec has a formal implementation for gaps between cells using the grid-gap property, Flexbox layouts did not receive this initially when it was conceived years ago. There has been discussion around backfilling the Flexbox spec with this in some way using a generic gap property, but it is still not widely supported amongst browser vendors yet, unfortunately:

https://caniuse.com/#feat=flexbox-gap

Because of this, the updated Row Elements use a bit of CSS magic behind the scenes to allow for gaps to be set between Columns easily. In dynamic CSS, the “row” and “column” gaps are applied to individual columns as margin with their values halved:

.$_el > .x-row-inner > * {
  margin: calc($layout_row_gap_row / 2) calc($layout_row_gap_column / 2);
}

Then, on the “inner” div of the Row, we add margin using these same values halved and then multiplied by -1 to give us the negative output:

.$_el > .x-row-inner {
  margin: calc(($layout_row_gap_row / 2) * -1) calc(($layout_row_gap_column / 2) * -1);
}

The gap you’re seeing at the bottom of the page when you have no footer, and a Section Element with no padding is correlated to these negative margin values on the Row Element to allow us to use the gaps. We have some additional styles going on to ensure that this type of “breakout” doesn’t occur in different ways (for example, it won’t happen if you have two Sections stacked on top of each other with no padding), but I’m not entirely certain why this is happening for this very last Section.

All that being said, this is a very specific use-case being a page with no footer, and the final Section having no padding, which I would think for most situations is rather unique. While at the moment there’s nothing I can see to “fix” this unique situation that I’d want to put into the tool globally, there are some remedies you can implement on your own if you’d like to explore them:

  • Set the vertical gap to 0px unless you need it
  • Use an actual footer on the page using the footer builder
  • Add some padding on the Section to offset the negative margins of the Row
  • Use custom CSS to add overflow: hidden to the final section of your page (this does address the issue at hand, but as mentioned above, is not something I would want to apply globally to the tool as it constrains layout possibilities far more than it helps this one tiny edge case)

Hopefully that helps to provide some perspective and potential solutions to explore. Thanks!

#4

Hi @kory!

Sure, I am solving that with css so no problem at all. I understand that it is a rare situation.

This is a Use case on landing pages where there is no footer or other distractions, to keep the attention ratio down.

When I add zero padding, that is usually for a graphic that is supposed to stick to the bottom.

But as I say, no problem! :slight_smile:

Thanks again!

#5

Sounds good Misho!