Basker Docs

Size

Set how wide and, on some blocks, how tall an element is, with mobile overrides where a block offers them.

Some blocks add a Size tab that sets how big the block or its element is, with separate overrides for phones on the blocks that support them. It appears on blocks built around a single piece of content, such as Media, and on container blocks like Rich Text.

Size sets the dimensions of the element itself. Layout controls do something different: they arrange a block's container and the items inside it (direction, alignment, gap). Use Size to change how wide an image is. Use Layout to set the gap between several items.

Not every control below is available everywhere, and some blocks use their own set of height options instead of the ones described here. Each block's page notes what it offers and its starting values.

Width

Choose Fit, Fill, or Custom.

  • Fit: only as wide as the content needs.
  • Fill: spans the full width available (the usual default).
  • Custom: reveals a Custom Width slider. Measured in pixels, it runs 50 to 1200px in steps of 10, starting at 300px. Measured as a percentage, it runs 1 to 100% in steps of 1, starting at 100%. The block decides which unit it uses.

Height

Where a block adds height to its Size tab, it uses its own set of options rather than the Fit / Fill / Custom choices above. See that block's own page, for example Rich Text, for what it offers.

Aspect Ratio

Some blocks add Aspect Ratio to fix the shape of the frame regardless of the source image: Auto (default), 1:1, 4:3, 16:9, 3:2, 2:3, 3:4, or 9:16. Combine it with Fit above to crop a tall photo into a wide banner, or the reverse.

Mobile Width

Where a block supports per-phone sizing, Mobile Width overrides the desktop width on small screens, using the same Fit / Fill / Custom choices. It starts at Fill and, when set to Custom, reveals a Custom Mobile Width slider matching the desktop range. At that default, the element fills the available mobile width.

Mobile sizing here is one part of adapting a page for small screens. For the full picture (stacking, hiding, and resizing across devices), see Designing for mobile.

Where to go next

On this page