
The sizing options allow you to define the size of an HTML element. The value of the sizing can be set in px, em, %(percentage), rem, vw, vw or ch units.
Width
The width property sets a fixed width of an HTML element.
Typically, the width value should be smaller than 300px in order to avoid horizontal scroll issues in mobile portrait mode.
If a large number is set for the desktop then consider using the responsive controls to set smaller numbers for tablet and mobile.
To set a width that is always responsive, consider using the max-width property.
Height
The height property sets the height of an HTML element.
Min Width
The min-width property defines the minimum width of an element.
If the content is smaller than the minimum width, the minimum width will be applied.
If the content is larger than the minimum width, the min-width property has no effect.
Note: This prevents the value of the width property from becoming smaller than min-width. The value of the min-width property overrides the width property.
min-width:200px
Min Height
The min-height property defines the minimum height of an element.
If the content is smaller than the minimum height, the minimum height will be applied.
If the content is larger than the minimum height, the min-height property has no effect.
Note: This prevents the value of the height property from becoming smaller than min-height. The value of the min-height property overrides the height property.
min-height:100px
Max Width
The max-width property defines the maximum width of an element.
If the content is larger than the maximum width, it will automatically change the height of the element.
If the content is smaller than the maximum width, the max-width property has no effect.
Note: This prevents the value of the width property from becoming larger than max-width. The value of the max-width property overrides the width property.
max-width:150px
When this option is enabled, it loads the global max-width value automatically as the block’s max-width. The global max-width setting can be found at GenerateBlocks > settings > Global max-width.
Max Height
The max-height property defines the maximum height of an element.
If the content is larger than the maximum height, it will overflow. How the container will handle the overflowing content is defined by the overflow property.
If the content is smaller than the maximum height, the max-height property has no effect.
Note: This prevents the value of the height property from becoming larger than max-height. The value of the max-height property overrides the height property.
max-height:50px
Visit MDN Web Docs, W3Schools, and CSS-TRICKS to learn more about the options.