> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Control Element Dimensions and Sizing

> Adjust element dimensions to control width, height, and responsiveness for clean and flexible landing page layouts.

The Dimensions section lets you control the **size of any element on your canvas**. This helps you manage layout, spacing, and responsiveness.

You can find these settings in the **right-side panel** when selecting any element.

***

## Where to Find It

1. Click on any element in the canvas
2. Go to the **right panel**
3. Open the **Dimensions** section

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/OxODOtVy1KOg0VAr/images/sizes.png?fit=max&auto=format&n=OxODOtVy1KOg0VAr&q=85&s=705a6a256803b04df8c147505c50015e" alt="Sizes" width="1306" height="988" data-path="images/sizes.png" />
</Frame>

***

## Size Controls

### Width

Controls how wide the element is.

### Height

Controls how tall the element is.

***

## Units Explained

When setting width or height, you can choose between different units:

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/OxODOtVy1KOg0VAr/images/image-7.png?fit=max&auto=format&n=OxODOtVy1KOg0VAr&q=85&s=f31fcf19b3ae1fd9797b6520f523bfd1" alt="Image" width="292" height="319" data-path="images/image-7.png" />
</Frame>

### px (Pixels)

* Fixed size
* Does not change based on screen
* Best for precise control

### % (Percentage)

* Relative to the parent container
* Responsive and flexible
* Best for layouts that adapt to screen size

### Fit

* Automatically adjusts to content
* Element grows or shrinks based on what’s inside

***

## Advanced Options

Click **More Options** to access:

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/OxODOtVy1KOg0VAr/images/image-8.png?fit=max&auto=format&n=OxODOtVy1KOg0VAr&q=85&s=979d94a0d85cf73a9ce230c967d4403e" alt="Image" width="285" height="364" data-path="images/image-8.png" />
</Frame>

### Min Width / Min Height

* Sets the smallest size the element can be

### Max Width / Max Height

* Sets the largest size the element can grow to

***

## Example

* Width → `100%`
* Max Width → `600px`

👉 The element will stretch on smaller screens but stay within 600px on larger screens.

***

## Best Practices

* Use **%** for responsive layouts
* Use **px** for exact control
* Use **Fit** when content size should define the element
* Set **max width** to keep layouts clean on large screens