Who can use this feature:
This article is for Editor v4 users. If you’re using Editor v3, check out the relevant article here: Advanced tab
The Size control sets the height and width of an element. 
There are three types of size settings:
- Unmodified: The height and width of the element under normal circumstances. This setting lets the content decide the element size.
- Min: The smallest width an element can shrink to, even if the content inside it or the surrounding layout suggests it should be smaller. Helps balance design with responsiveness.
- Max: The largest width an element can grow to, even if the screen or content allows it to be larger. Helps balance design with responsiveness.
- Overflow: If the element’s contents are too large for the element, you can set the overflow to:
- Visible: The contents are visible even though they are outside the element’s boundaries.
- Hidden: Contents outside the element’s boundaries are hidden.
- Auto: Contents outside the element’s boundaries can be seen by scrolling.
Change an element’s size
In the example below, we’ll create an image that will be responsive and stay withing design constraints.
To set the height and width of the element:
- Open the Elementor Editor.
- Add a Div Block to the canvas.
- Drag an Image element into the Div Block.
The options for the Image element should appear in the panel.
- Add an image to the widget. For details, see Adding images and icons.
- Click the Style tab.
- Open the Size field.
- Set the default width to 50% so the element size will adjust based on its parent container.
- Set minimum width to 200px to prevent the image from becoming too small.
- Set maximum width to 600px to ensure it does not stretch out of proportion.
- Leave the default heights.
This creates an image that looks good on a variety of screen sizes.
