Global styles css code for MaxiBlocks blocks

Description

Use in your theme's global styles css file, customizer, site editor styles, a special plugin, or in any other css file in your theme.

Breakpoints

• xs: 480px
• s: 767px
• m: 1024px
• l: 1366px
• xl: 1920px
• xxl: 1921px and up

Hierarchy of styles

Style card styles are global styles that are applied to all blocks. You can target blocks by tone (see below), by block kind (see below), group of blocks by a special class (see below), or by specific block (see below).

Style Card variables

Use for changing the colours and other styles globally.

Light and Dark tones

You can style the light and dark tones of the blocks using the following classes:

• .maxi-light
• .maxi-dark

Block kind

You can target blocks by their kind using the following classes:

• .maxi-accordion-block
• .maxi-button-block
• .maxi-column-block
• .maxi-container-block
• .maxi-divider-block
• .maxi-group-block
• .maxi-image-block
• .maxi-list-item-block
• .maxi-map-block
• .maxi-number-counter-block
• .maxi-pane-block
• .maxi-row-block
• .maxi-search-block
• .maxi-slide-block
• .maxi-slider-block
• .maxi-svg-icon-block
• .maxi-text-block
• .maxi-video-block

Special classes

You can group and target blocks by special classes you add in the Editor -> Sidebar -> Add CSS classes -> Input CSS classes to target this block.

Specific blocks

You can target blocks by their special classes or unique ids. The preferred way is to use the special classes you add (see above).

Fonts

You need to add the fonts files to your theme first. Then you can use them in the global styles css file.

Smooth scrolling

Use for smooth scroll to anchor links.