ComboStrap Styling - Dimension (Width and Height)
1 - About
Every Box components and even the whole main page dimension may be resized with the styling attributes:
- and height.
2 - Articles Related
3 - Dimension
3.1 - Width
3.1.1 - Box
The width attributes supports the following values:
- length - a length (in pixel, percentage, or other length unit)
- fit-content - the width of the text.
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 warning width="200px" align="center">
=== A constrained warning note ===
I'm a note being constraint in a box with a maximum width of 200 pixels.
</note>
A constrained warning note
I'm a note being constraint in a box with a maximum width of 200 pixels.
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.
3.1.2 - Page
If you want to constraint a whole page, you can use a container
<container width="700px">
====== Page title ======
A page that is centered and constraint in width
===== Section =====
Lorem ipsum
</container>
Page title
A page that is centered and constraint in width
1 - Section
Lorem ipsum
3.2 - Height
The height attribute is also a style shortcut that will apply a maximum weight.
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.
4 - For the geek
<note style="max-width:200px">
The height component attribute is a style shortcut and could have been written
<note style="height:100px;overflow:auto">