Set the Size and Aspect Ratio of the block.
Blocks do not need Size property values
Before any CSS is applied, the browser automatically determines the blocks size based on its intrinsic dimensions and default styling, making it generally responsive.
You only need to set size properties if you want to change this behaviour.
Fixed Sizing can lead to overflow
Avoid using fixed units for widths, min-widths, heights, or max-heights, as they can cause a block to overflow the viewport (leading to horizontal scrolling) or cause the block’s content to spill out of its container, overlapping other elements. See guidance below.
Width, Min Width & Max Width
a width value set a blocks horizontal size but:
- it won’t be less than
min-width - it won’t be more than
max-width - if
min-widthis more thanmax-width, thenmin-widthis used.
Fixed Width values can result in unwanted horizontal scroll
Fixed width or min-width can cause horizontal scrolling on smaller screens. For example, a width of 500px may overflow on mobile devices. To prevent this, avoid fixed widths that exceed the parent container.
If a fixed width is necessary, use max-width: 100% to keep it within bounds, or use responsive settings to adjust the width on smaller screens.
Max width and auto margins for contained and centred content.
A common design pattern features a full-width background with centered, contained content. This can be achieved using a container and an inner container, where the inner has a max-width and auto margins. GenerateBlocks provides the Toolbar shortcut for Container blocks to do this automatically for you.
Height, Min Height, Max Height
a height value sets a blocks vertical size but:
- It won’t be less than
min-height. - It won’t be more than
max-height. - If
min-heightis more thanmax-height, thenmin-heightis used.
Use Min Height to to avoid unwanted overflow
To ensure flexibility, use min-height instead of height or max-height when possible. This allows content to expand as needed without causing overflow or restricting layout adaptability.
For example, when creating a full screen height hero or feature section use:
Aspect Ratio
The aspect-ratio property sets a blocks width-to-height ratio. The browser adjusts its size to maintain this ratio, even if the parent or viewport changes.
For aspect-ratio to work, at least one dimension ( width or height ) must be set to auto or left unset. If both are explicitly defined with fixed values, the aspect ratio has no effect.
Images
the aspect-ratio property allows you to responsively crop a image block. To ensure the image is not distorted you can set: