MasterStudy Adaptive Container
Last updated
Was this helpful?
Last updated
Was this helpful?
There is a Gutenberg MasterStudy Adaptive Container block. It gives you an adaptive section to add other blocks within this block.
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.
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.
