Skip to content

Grid

Resize options

Almost all components in Howlite can be resized (inside a Page section component). In order to resize an Image or Container click Edit icon ("Edit" icon) for the selected component and open the "Layout" tab in the dialog.

Grid options

For each breakpoint separately, you can control:

  • the Offset property: for example, if you set it to "1 Column" on L breakpoint, the component will be moved 1 column to the right side.
  • the Width property: for example, if you set it to "6 Columns" on L breakpoint, the component will be 6 columns wide on the desktop.

The above settings will result in the following container size and position:

Resized container

Breakpoints definition

Across the Howlite projects the following breakpoints are used:

  • L Breakpoint: 970px and above
  • M Breakpoint: 768px - 969px
  • S Breakpoint: 0 - 767px

Additional notes

In Howlite the following components intentionally don't have "resize" options:

  • CTA - buttons width depends only on its label width
  • Page Section - it's always 12 columns wide in Howlite (but you can resize a container inside if needed)