[Support request] Guttenberg gap between columns when stacked for smaller resolutions

Home Forums Support Guttenberg gap between columns when stacked for smaller resolutions

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1182033
    Greg

    Hi guys

    Working on my first GP site for a client and have to say loving the theme and options so far. One small issue I’ve run into whilst using the theme and Gutenberg editor, is on tablets and mobiles I’m getting some funky alignment/spacing issue with stacking columns.

    On this block I have 3 columns but on mobile it stacks them immediately after one another with no spacing:
    https://pasteboard.co/IXdG2eL.png

    Then on tablets it seems to have trouble placing two alongside one another:
    https://pasteboard.co/IXdGwR1.png

    Any help would be appreciated – first time using GP and Gutenberg so most likely something obvious I’ve missed!

    Thanks
    Greg

    #1182096
    Greg

    One other thing I forgot to mention, I’m getting a horizontal scrollbar on my homepage only, I found some CSS in another forum topic which removed it but then caused further issues on mobile – if you could advise on this too that’d be awesome.

    Thanks
    Greg

    #1182184
    David
    Staff
    Customer Support

    Hi there,

    Yeah – the Gutenberg developers keep ‘updating’ the columns and neglect to include mobile responsiveness. Try this CSS:

    @media (max-width: 782px) {
        .wp-block-columns .wp-block-column {
            margin-bottom: 2em !important;
        }
    }
    
    @media (max-width: 782px) and (min-width: 600px) {
        .wp-block-columns .wp-block-column:nth-child(2n) {
            margin-left: 0 !important;
        }
    }

    We have just released the Alpha version of our own block plugin, which you may be interested in testing for the future:

    https://generateblocks.com

    #1182463
    Greg

    Thanks for the info David, I like the look of Generate Blocks and have just tried giving it a spin, works well – although I can’t seem to get a container with a full width background to work – anything I’m missing?

    Thanks
    Greg

    #1185720
    Greg

    Hi guys

    I’ve switched over to Generate Blocks and on the whole really pleased with it – but still having the issue of no spacing between the columns when on mobile – any ideas? I seem to be getting an odd overlap of the columns now…

    Screenshot

    Thanks for any help
    Greg

    #1185779
    David
    Staff
    Customer Support

    Did you resolve the Full Width container ?

    For the gutters – select the Grid Container and set the Vertical Gap:

    https://docs.generateblocks.com/article/grid-overview/#editing-our-grid-block

    #1185791
    Greg

    I did thanks David, Tom got back to me on email – I just had to set the page layout as full width then put everything into the new GB containers and grids.

    Thanks for that, I’ve added 30px for mobile vertical gap but I still seem to have the overlap issue – I don’t suppose you know what might be causing that?

    Screenshot

    Screenshot

    Thanks for your replies
    Greg

    #1185796
    David
    Staff
    Customer Support

    It’s because of your Custom CSS:

    .categories {
        background-image: url(https://kentdesign.co.uk/wp-content/uploads/Confetti-WhiteOverlay.png) !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        padding: 14px;
        border-radius: 4px;
        box-sizing: border-box; /* Add this to cure the gap */
    }

    You can either add the box-sizing property i included with comment above …. or simply scrap the CSS and do it all in GenerateBlocks 🙂

    #1185975
    Greg

    That’s awesome, thanks David, my CSS is a bit rusty so appreciate you offering support for my custom code when it’s not a theme issue. All looking exactly as I wanted now 🙂

    #1185984
    David
    Staff
    Customer Support

    No problems – glad to be of help.
    You can of course do it without any CSS …. my paid days for custom CSS are numbered lol

    #1185986
    Greg

    Haha mine too judging by this, that or they never really started 😀

    Thanks again!

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