MasterStudy Adaptive Container

There is a Gutenberg MasterStudy Adaptive Container block. It gives you an adaptive section to add other blocks within this block.

Adjusting Settings

There are Settings available in the Block section.

• Layout:

  • Inner blocks use content width: Toggle to determine whether nested blocks will fill the width of this container or constrain content width.

• Adaptive Settings:

  • Adaptive Flex: Enable adaptive flex for the container.

  • Adaptive Block: Enable adaptive block for the container.

• Background Image: Add and customize background images for the MasterStudy Adaptive Container block

• Select Device: Choose the device for which the background image will be optimized.

• Padding: Set padding for the container.

• Margin:

  • Top, Right, Bottom, Left: Adjust margins for the container.

• Additional Settings:

  • Flex Grow: Define how the container should grow relative to other flex items.

  • Flex Shrink: Determine how the container should shrink relative to other flex items.

  • Flex Basis: Set the initial main size of the container.

  • Flex Order: Specify the order of the container within a flex container.

  • Min Width: Set the minimum width for the container.

  • Max Width: Set the maximum width for the container.

  • Min Height: Set the minimum height for the container.

  • Max Height: Set the maximum height for the container.

• Hide on Desktop: Choose whether to hide the container on desktop devices.

• Gradient: Add a gradient background to the container. Customize the type, angle, and colors of the gradient.

• Advanced:

  • HTML Anchor: Set a unique web address (anchor) for the block to enable direct linking.

  • Additional CSS Class(es): Add custom CSS classes to the container for further styling or functionality.

Adjusting Styles

These are Styles available in the Block section.

• Color:

  • Background: Choose the background color for the adaptive container.

• Typography:

  • Font Size: Set the font size for the text content within the adaptive container.

  • Line Height: Determine the spacing between lines of text within the adaptive container.

• Border:

  • Border Width: Specify the width of the border surrounding the adaptive container.

  • Radius: Set the border radius to control the curvature of the corners of the adaptive container.