Helper CSS classes
This theme predefines some useful modifier CSS classes. You can use them in the block editor, in a page builder, or however you find useful. These classes modify appearance of elements and blocks.
→ How to apply helper CSS class?
no-centered-submenu
Apply on Navigation block or specific Submenu block to stop relative center align on opened sub-menus.
is-fullwidth
Apply on an image or form field to stretch it full width of its container.
has-focus-alt
Apply on focusable element, such as Button block, when focus outline color contrast is insufficient against the surrounding background. (This helps improve accessibility in areas a theme has no control over.)
is-hidden-on-pagesis-hidden-on-posts
Apply on a section or element in a template or template part, that should not display on specific post type (page or post).
screen-max-width-#screen-min-width-#
or:
is-style-breakpoint-#-hideis-style-breakpoint-#-only
These are helper responsive CSS classes you can use on elements to hide or show them on specific screen sizes only. You can combine the classes to create desired result.
The # can be one of the s/m/l/xl/xxl values which are translated to these responsive breakpoints (screen widths):
s = 448px
m = 672px
l = 880px
xl = 1280px
xxl = 1600pxhas-low/high-zindex
Apply on an element you want to lower or raise in comparison to surrounding elements. (Note that this element has to have a non-static CSS positioning applied already.)
has-hidden/visible-overflow
Sets element overflowing behavior.