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.