ComboStrap Styling - Dimension (Width and Height)

About

Every Box components and even the whole main page dimension may be resized with the 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 conditional length in percentage
fit-content - the width of the text.

If you want to center the box, use the align attributes

Example: a note will take all the space by default, if you want to constrain the box to a lower size, apply the width attributes.

<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>

For the Geek

On a 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.

Height

The height attribute is also a style shortcut that will apply a maximum height.

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

<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>

A constrained note in height

I'm a note being constraint in a box with a maximum height of 100 pixel.

Horizontal Scroll

The default scroll mechanism is the lift but you can also set it to a Toggle animation

<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>

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.