help center

On this page

Widget Advanced Settings: Size

Last Update: July 25, 2023

Introduction

The Size option in Elementor uses the Flex CSS properties of flex-grow and flex-shrink. The flex grow/shrink property specifies how the item will behave relative to the rest of the flexible items inside the same container when the window is resized.

Container Size Property Widget Advanced Settings: Size 1

Using the Size function

When using the Size option, the element’s Width property must be left at the default or blank value. If a Width property is defined, the Grow, and Shrink Size properties will not function.

Auto Size

If you wish to use the auto Size property you may do so by selecting the grow or shrink icon in the editor panel. This will automatically apply the property to best suit your layout.

Grow

If the grow property is used, the item will attempt to use the remaining space in the container by growing to fit. The default value is 1.

image 23 Widget Advanced Settings: Size 3

Shrink

Similar but in the reverse, if all the items in the container are too large to naturally fit, the Shrink property may be used. The default shrink value is 1.

Custom Size

A custom value of each may also be applied to each. For example when you wish one or more elements to occupy a specific amount of the available space when allowed.

image 24 Widget Advanced Settings: Size 5

Locating the Size property

You will locate the Size property from any Container or widget in it’s Advanced Tab

Locating The Size Property Widget Advanced Settings: Size 7

Size Options

You may select between from the icons:

  1. None
  2. Grow
  3. Shrink
  4. Custom – If this option is enabled, the following options will appear:
    1. Custom Flex Grow – Enter value
    2. Custom Flex Shrink – Enter value

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article