- This topic has 10 replies, 2 voices, and was last updated 6 years ago by
.
-
Posts
-
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.pngThen on tablets it seems to have trouble placing two alongside one another:
https://pasteboard.co/IXdGwR1.pngAny help would be appreciated – first time using GP and Gutenberg so most likely something obvious I’ve missed!
Thanks
GregOne 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
GregCustomer 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:
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
GregHi 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…
Thanks for any help
GregDid 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
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?
Thanks for your replies
GregIt’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 🙂
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 🙂
No problems – glad to be of help.
You can of course do it without any CSS …. my paid days for custom CSS are numbered lolHaha mine too judging by this, that or they never really started 😀
Thanks again!
- You must be logged in to reply to this topic.
