--- layout: default permalink: /sizing category: utilities title: Sizing description: "Easily add sizes to the elements, width or height in relation to the viewport or in relation to the father." ---

{{ page.title }} Utilities

{{ page.description }}


e-fullscreen

Take 100% of the viewport size (width and height)

{% highlight html %}
...
{% endhighlight %}

e-md-screen

Take 50% of the viewport size (width and height)

{% highlight html %}
...
{% endhighlight %}

e-sm-screen

Take 33.33x% of the viewport size (width and height)

{% highlight html %}
...
{% endhighlight %}

w-100

Take 100% of the size of the father (only the width)

{% highlight html %}
...
{% endhighlight %}
Height sizes

These classes only add height sizes to the element.

{% highlight html %}
...
{% endhighlight %}
{% highlight html %}
...
{% endhighlight %}
{% highlight html %}
...
{% endhighlight %}