---
title: "Width properties"
date: "2017-11-11T12:56:44+00:00"
summary: "Control element dimensions with precision using min-width, max-width, and fixed width properties. Learn how to set boundaries, maintain flexibility, and create responsive layouts for your web designs."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/width-properties"
id: "408a9028-f347-47be-be49-ff2f96535a0d"
---

Table of contents will be added

Set the Minimum width, Maximum width or Fixed width of an element.

Min width
---------

Set the minimum width of an element.

### Behavior:

*   Min-width prevents the width of the element from being smaller than the value set
*   Min-width does not prevent the element from growing in width if the content within it is larger than the value set
*   Min-width overrides the Width and Max-width properties.

### Expected value:

*   Enter a number

### Accepted units:

You can leave blank or specify a unit to be used.

*   **blank** - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within [Base unit settings](/drupal-starter-kits/add-ons/site-studio/configuring-your-base-unit-settings "Configuring your base unit settings")
*   **px** - The value will be applied in pixels
*   **%** - The value will be applied as a percentage of the parent elements width

**Note:** Additional units are accepted. For more information see [https://www.w3schools.com/cssref/css\_units.asp](https://www.w3schools.com/cssref/css_units.asp)

Find more information at [https://www.w3schools.com/cssref/pr\_dim\_min-width.asp](https://www.w3schools.com/cssref/pr_dim_min-width.asp)

Max width
---------

Set the maximum width of an element.

### Behavior:

*   Max-width prevents the width of the element from being larger than the value set
*   Max-width does not prevent the element from being smaller in width if the content within it is smaller than the value set
*   Max-width overrides the Width property

### Expected value:

*   Enter a number

### Accepted units:

You can leave blank or specify a unit to be used.

*   **blank** - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within [Base unit settings](/drupal-starter-kits/add-ons/site-studio/configuring-your-base-unit-settings "Configuring your base unit settings")
*   **px** - The value will be applied in pixels
*   **%** - The value will be applied as a percentage of the parent elements width

**Note:** Additional units are accepted. For more information see [https://www.w3schools.com/cssref/css\_units.asp](https://www.w3schools.com/cssref/css_units.asp)

Width
-----

Set the width of an element.

### Expected value:

*   Enter a number

### Accepted units:

You can leave blank or specify a unit to be used.

*   **blank** - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within [Base unit settings](/drupal-starter-kits/add-ons/site-studio/configuring-your-base-unit-settings "Configuring your base unit settings")
*   **px** - The value will be applied in pixels
*   **%** - The value will be applied as a percentage of the parent elements width
*   **vw** - The value will be applied as a percentage of the browser viewport width

**Note:** Additional units are accepted. For more information see [https://www.w3schools.com/cssref/css\_units.asp](https://www.w3schools.com/cssref/css_units.asp)

Find more information about width at [https://www.w3schools.com/cssref/pr\_dim\_width.asp](https://www.w3schools.com/cssref/pr_dim_width.asp)