Automatic CSS + Gutenbricks + Sections: How to avoid "gaps" between sections.

Problem

By default, the smart spacing of ACSS ensures distances between sections that are created with Gutenberg (or not with Bricksbuilder).

This behaviour is not intended when working with Gutenbricks, for example. There, sections with full width should normally stick directly to each other vertically.

By default, ACSS Smart Spacing generates the following CSS code:

.brxe-text > * + *, .brxe-post-contentwhere(:not([data-source="bricks"])) > * + * {
margin-block-start: var(--flow-spacing, initial);
margin-block-end: 0px;
}Code language: CSS (css)

Solution

By default, ACSS offers an option to avoid margins for certain HTML elements.

  1. Call up ACSS
  2. Spacing > Smart-Spacing > Other > Avoid Duplicate Margins
  3. "section" in the :is(...) bracket to the other HTML elements:
":is(section, figure, blockquote, ul, ol)"Code language: JSON / JSON with Comments (json)

See also

More techdoks and snippets

Tag filter

Shortcode E-Mail Obfuscator

The following shortcode snippet is useful for disguising emails to protect them from SPAM. Please note that this method only works if Javascript is activated. In addition, there is no 100%igen protection against bots,...

Elementor popup / flyout menu no longer closes for mobile view

Elementor: Version 3.72 Behaviour: An Elementor popup opens, but no longer closes (when clicking on icon or Esc or other triggers). If you look in the source code, you will find the Javascript error message: "Elementor t.entrance_animation_duration is undefined" Cause:...

PHPStorm: Local Changelist in Git Tool disappeared

Problem: Local Change List under PHPStorm is missing in the Git Tool Solution: From time to time I had the phenomenon that the Local Changelist (the files in my version control) were not visible as tabs in the Git tool....

Variable not available in blade component

Problem: The parameter transfer of a blade attribute does not work, the variable in the component is empty. There is no error message, but the variable does not appear to have been passed. Solution: The error may lie in the usage...

WP CLI Error: Error establishing a database connection.

Appearance: Submitting commands via WP CLI, but WordPress in the browser works. This error often occurs when the WP CL interpreter cannot correctly interpret the database connection in wp-config.php. Solution: In 99% of all cases the...

Convert Px to SEM / EM very quickly with Alfred

There is a wonderful Alfred workflow on the Mac that converts Px to Rem: Download direct link: https://raw.githubusercontent.com/vitorgalvao/requested-alfred-workflows/master/Workflows/PxRemEm.alfredworkflow Simply install, then type CMD-Space: Alfred Bar "pxrem" and enter the number in pixels. The conversion to REM will...

Setting up XDebug with PHPStorm and Valet Development Environment

Preparation: Homebrew should be installed Valet should be installed and running: https://laravel.com/docs/7.x/valet Browser extension for PHPSTORM should be installed: https://www.jetbrains.com/help/phpstorm/browser-debugging-extensions.html gerry@webgarten ~ % brew install pecl gerry@webgarten ~ % pecl install xdebug In case of error message: Warning:...