MasterStudy Templates
Live DemoChangelogResources Get MasterStudy
  • MasterStudy Templates
  • General
    • System Requirements
  • Installation & Activation
    • Theme Installation and Demo Import
    • MasterStudy Premium Templates
    • How To Update the Theme
    • License Utilization
    • How to get Premium Support?
  • LMS Widgets
    • Elementor Widgets
    • Gutenberg Blocks
  • Customizer Settings
    • Colors
    • Header Settings
    • Footer Settings
    • Typography
    • Menus
  • Elementor Blocks
    • Header
    • Footer
    • Menus
  • Gutenberg Blocks
    • MasterStudy Call to Action
    • MasterStudy Icon
    • MasterStudy Button
    • MasterStudy Testimonial
    • MasterStudy Iconbox
    • MasterStudy Adaptive Container
    • MasterStudy Text
  • Elementor Widgets
    • Courses Carousel
    • Courses Grid
    • Courses Search box
    • Featured Teacher
    • Recent Courses
    • MS LMS Testimonials
  • Extra Materials
    • Changelog
    • Demo
  • STYLEMIXTHEMES
    • Themes
    • Plugins
Powered by GitBook
On this page
  • Adjusting Settings
  • Adjusting Styles

Was this helpful?

  1. Gutenberg Blocks

MasterStudy Adaptive Container

PreviousMasterStudy IconboxNextMasterStudy Text

Last updated 7 months ago

Was this helpful?

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.