Sizing Options Overview

These options require GenerateBlocks 1.7.

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.

width:150px

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.

height:50px

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.

width:150px
width:150px
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.

height:50px
height:50px
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.

width:150px
width:300px
max-width:150px
Use Global max-width

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.

height:50px
height:100px
max-height:50px

Visit MDN Web Docs, W3Schools, and CSS-TRICKS to learn more about the options.