Setting widths and heights

GroovePages offers several options to configure both the width and height of elements on the canvas.

Width

The Width dropdown offers several options to choose from:

• auto
  This makes it expand to occupy all available horizontal space within its containing block. If it has any horizontal padding or border, the widths of those do not add to the total width of the element.
• px
  When choosing this option, you'll be able to use the slider to set a width of a fixed number of pixels for the selected element.
• Relative to page
  Choosing this option will activate a slider with options using the rem unit, resulting in the element's width being set relative to the width of the page.
• Relative to parent
  Choosing this option will activate a slider with options setting the element's width as a percentage of the elements parent. For example, setting a value of  "1/2" would make the element's width 50% of its parent. 
• full
  the element’s total width will be 100% of its containing block plus any horizontal margin, padding and border.
• screen
  This option will set the element's width to 100% of the available viewport (ie the browser window)

Minimum width

Only available in expert mode

The "Minimum width" dropdown let's you choose a minimum width for the selected element. We currently offer two options:

• 0
  This will set a minimum width of "0" (zero)
• full
  This will set a minimum width 100%

Maximum width

Only available in expert mode

The "Maximum width" dropdown let's you choose a maximum width for the selected element. We currently offer these options:

• none
• xs
• sm
• md
• lg
• xl
• 2xl
• 3xl
• 4xl
• 5xl
• full

Height

The Height dropdown offers the following options:

• auto
  This makes it expand to occupy all available vertical space within its containing block. If it has any vertical padding or border, the heights of those do not add to the total height of the element.
• px
  When choosing this option, you'll be able to use the slider to set a height of a fixed number of pixels for the selected element.
• Relative to page
  Choosing this option will activate a slider with options using the rem unit, resulting in the element's height being set relative to the height of the page.
• Relative to parent
  Choosing this option will activate a slider with options setting the element's height as a percentage of the elements parent. For example, setting a value of  "1/2" would make the element's height 50% of its parent. 
• screen
  This option will set the element's height to 100% of the available viewport (ie the browser window)