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

Home Forums Support Verticle gap on two-column grid with list elements

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1492681
    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!

    Brian

    #1492853
    David
    Staff
    Customer Support

    Hi there,

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

    #1494779
    forgemedia

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

    Brian

    #1494819
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.