[Resolved] Using the Capital site, updated GB legacy layout now Vertical Gap not working

[Lindsay]

Using the Capital site and noted that GB using legacy layout system on the Containers.

Use legacy layout system
This Container is using an old layout system. Toggle this to migrate to the new system.

Toggled to migrate and now the grid vertical gap does nothing. It’s there in the CSS

.gb-grid-wrapper-cb3ef5bf {
  align-items: center;
  row-gap: 40px;
  margin-left: -20px;
}

But it isn’t being applied. I know this might be more GenerateBlocks but just wondering if you could help as it’s the Capital site.

[Ying]

Hi there,

Yes, GB Grid is no longer using padding as the vertical gap, it’s now using row-gap as you’ve seen in the CSS.

Can you show me the page and point me to the section?

Let me know 🙂

[Lindsay]

Many thanks for your help.

If you log in and look at the Home page (site under development). The ‘OUR GOALS’ heading (third Container) the Vertical Gap doesn’t appear to be applied – on the original there is a 30px padding on the grid column I think. I’ve added the Vertical Gap of 40px in the parent Grid’s block settings – but nothing changes, even though the CSS reflects the row-gap: 40px; correctly. I’m sure it’s me not understanding the CSS, so any help greatly appreciated.

[Ying]

Are you trying to add some space under the OUR GOALS heading？

If so, the new vertical gap system will not work, as the row-gap only applies to the space between rows.

In your case, the 2 grid containers are in the same row, so there’s no place to apply the row-gap.

You might remember an old option that removes the vertical gap, it’s usually applied to the last grid container so there’s no extra padding, now we don’t have to manually do this, as row-gap will NOT apply to the last grid container.

Let me know if there’s anything not clear!

[Lindsay]

Ahhh, so it seems I lost the padding in the ‘grid-columns’ when switching away from the legacy layout. I added a margin back to the ‘containers’ which suited my layout better. I got fixated on the wrong thing but it’s helped to clarify.

[Ying]

Glad to hear that 🙂

[Author]

Posts