---json
{
    "page_id": "kxnhr9r0nfjkiiyj9kih2"
}
---

====== ComboStrap Styling - Dimension (Width and Height) ======



===== About =====
Every [[docs:block:block|Box components]] and even the whole main page dimension may be resized with the [[docs:styling:styling|styling attributes]]:
  * [[#width]]
  * and [[#height]].


===== Dimension =====

==== Width ====

The ''width'' attributes support the following values:
  * ''length'' - a length (in pixel, percentage, or other length unit)
  * a [[docs:styling:breakpoint|conditional length]] in percentage
  * ''fit-content'' - the width of the text.

<note info width="fit-content">If you want to center the box, use the [[docs:styling:align|align attributes]]</note>

**Example**: a [[docs:block:note|note]] will take all the space by default, if you want to constrain the box to a lower size, apply the ''width'' attributes.

<webcode story name="Width" >
<code dw>
<note warning width="200px" align="center">
=== A constrained warning note ===
I'm a note being constrained in a box with a maximum width of 200 pixels.
</note>
<note warning width="100%-xs 50%-sm" align="center">
=== A Note with a conditional width ===
This note will take:
  * 100% space on a mobile screen (xs) 
  * 50% on a small screen (sm) and above
</note>
</code>
</webcode>


<note info>
=== For the Geek ===
On a [[docs:block:block|box]], the ''width'' attribute will apply a ''maximum-width'' constraint. When your website will be seen on a screen below this ''width'', the box will adapt accordingly keeping your website responsive.
</note>






==== Height ====
The ''height'' attribute is also a [[docs:styling:style|style shortcut]] that will apply a maximum height.


Example: a [[docs:block:note|note]] will take all the space by default, if you want to constraint the box to a lower size, apply the ''width'' attributes.

<webcode name="Height" >
<code dw>
<note important width="200px" height="100px" align="center">
=== A constrained note in height ===
I'm a note being constraint in a box with a maximum height of 100 pixel.
</note>
</code>
</webcode>

==== Horizontal Scroll ====


The default scroll mechanism is the ''lift'' but you can also set it to a [[:docs:animation:toggle|Toggle animation]]

<webcode name="Height" >
<code dw>
<note important width="300px" height="150px" align="center" scroll="toggle">
=== A constrained note with a toggle ===
I'm a note being constraint in a box with a maximum height of 100 pixel
and a toggle scroll mechanism.
In case, you wish to show the whole content at once.
</note>
</code>
</webcode>