[Resolved] Lighweight Grid Columns stacking on mobile without space in between

Home Forums Support [Resolved] Lighweight Grid Columns stacking on mobile without space in between

Home Forums Support Lighweight Grid Columns stacking on mobile without space in between

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #619674
    Theo

    Hi, I am facing a layout issue with Lightweight Grid Columns: On desktop and tablet sizes I have 2 columns set up, one is completely filled with an image, the other has a full background fill and some text. On mobile, these 2 get stacked. I would like to have a seamless stack, but somehow there’s a gap inserted that seems to originate from the Lightweight Grid Columns. I haven’t been able to figure out the CSS to de-activate that gap. I hope someone can help?

    Code:
    [lgc_column grid=”50″ tablet_grid=”50″ mobile_grid=”100″ last=”false” class=”push-50 tablet-push-50″ equal_heights=”true” style=”background-color:#f8f7f4;height:100%;”]
    <h1>This is a test with 2 columns.</h1>
    <h3>And an extra sentence</h3>
    [/lgc_column][lgc_column grid=”50″ tablet_grid=”50″ mobile_grid=”100″ last=”true” class=”pull-50 tablet-pull-50″ equal_heights=”true” style=”height:100%;padding:0px;”][/lgc_column]

    CSS:
    .full-width-gite-grid .generate-sections-inside-container {
    padding:0;
    }

    GeneratePress 2.1.3
    GP Premium 1.6.2
    #619749
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    @media (max-width: 768px) {
        .inside-grid-column {
            margin-bottom: 0;
        }
    }
    #619870
    Theo

    Hi David,

    Thanks for your help. This works like a charm. Interestingly: this shows correctly in Safari and Chrome’s responsive mode, but the gap still remains in Firefox Developer Edition. Apparently some bug in their code.

    #619982
    David
    Staff
    Customer Support

    You’re welcome. FF does have some peculiarities

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.