Home Forums Weaver Xtreme Theme Gutenberg space between Blocks

This topic contains 5 replies, has 3 voices, and was last updated by  scrambler 4 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #59726

    buddhafragt
    Participant

    Hello,

    in the new Gutenberg editor I have alot space between the Blocks. How I can remove?

    Greetings, Michael

    #59727

    Weaver
    Keymaster

    What space that displays in the editor is not necessarily the same as on the final output page.

    There currently is no way to adjust the block spacing for the editor in the theme as that styling is loaded differently than the front end visitor display and can’t be overridden. The vertical spacing in the editor, whether  Classic or Bock, has never been 100% WYSIWYG for the final output. And it typically isn’t critical as all that changes depending on the viewing window size.

    For the visitor side, the paragraph spacing specifically will be the same as the Classic editor, and Weaver Xtreme has options to adjust that. There may be different spacing for different blocks as determined by the theme’s main style sheet for specific blocks. Those would be overridden by custom CSS. Some of the more “advanced” blocks are surrounded by a <div> with a specific class, while others don’t have special classes (paragraphs, lists, normal images). And the block editor does allow you to set different options for different blocks that can affect spacing.

    It’s a bit complicated, in other words, but you can inspect the output HTML (either directly or with browser developer tools) to find the class name of specific blocks, and add custom CSS.

    That’s the general answer for those readers who can read HTML well enough to figure out the class and custom CSS on their own.

    If you have specific blocks that you need help with, reply with a link to your site and specify specific blocks.

    #59728

    scrambler
    Moderator

    If you mean you want to reduce spacing between the blocks in your final page, give us a link and we can give you some custom CSS to do that.

    Last time I looked the default spacing was 2.5em which is a bit large indeed 🙂

    Adding the rule below to the theme Global Custom CSS Rule box with a smaller value will change it

    #content [class^=wp-block-] {margin-bottom:2.5em;}

    Depending on the content of the block there may be other spacing at play, which is why we would need a link with specifics about the spacing to adjust

     

    #59729

    buddhafragt
    Participant

    Hello, thanks alot,

    the CSS from Scrambler works in the customizer preview! But the joy was too early, in the real website no change!

    I change to: “#content [class^=wp-block-] {margin-bottom: 0em;}” in Global Custom CSS, bit in the page it is still 2.5 em!

    Here is a link: https://www.buddhaschreibt.de/kewet/kewet-ladegeraet/

    The space between the pictures is too much. It is the columns Block!

    Gretings, Michael

    #59730

    buddhafragt
    Participant

    I found the fault:

    The CSS must be located in Additional CSS – WP Setting, here it is wirking!

    Thanks for your help!!

    #59731

    scrambler
    Moderator

    @buddhafragt

    The rule works fine in the Theme Global Custom CSS Rule box (Main options > Fonts & Custom > Custom CSS Rule)

    If it did not for you, it most likely means you have some bad CSS in that box that breaks your theme Global Custom CSS, so you should try and figure it out 🙂

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.