[Resolved] Verticle gap on two-column grid with list elements

[forgemedia]

Hey guys,
Just curious if there is any way to remove the vertical gap in GenerateBlocks when you only have list elements. A good example is creating a table of contents. It’s much nicer to create a 2 column grid when you have a lot of headings/steps.

Grid with 2 columns

1. Heading 5. heading
2. Heading 6. heading
3. Heading 7. heading
4. Heading 8. heading

GenerateBlocks has the remove vertical gap option, however, when you have a list in column 1 and a list in column 2, the list items in the grid (the ol element) get a bottom margin. This leaves you with two lists and a gap between on mobile.

One way I could tackle it is this. Add a separate class + media query on the left container in the grid. This way it forcibly removes the bottom margin once it scales down.

@media screen and (max-width: 768px) {
	.no-margin-mobile {margin-bottom:0px;}}

However, curious if there is any better way to do this? Other than manually adding my class on it?

Thanks!

[David]

Hi there,

aside of using Negative top margins on the Grid Containers, no – and the CSS method is the best way.

[forgemedia]

Cool, thanks David! I’ll roll with the CSS method.

[David]

You’re welcome

[Author]

Posts