Site logo

Archived topic

Verticle gap on two-column grid with list elements

3 replies · Started by forgemedia on October 16, 2020

Viewing posts 1–4 of 4

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!

Hi there,

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

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

You're welcome

This archived topic is closed to new replies.