Sizing

Easily control the width and height of elements using utility classes. These flexible and responsive classes allow you to define sizes that adapt to various breakpoints. With Mytril, you can seamlessly apply predefined height and width values, streamlining your layout process.

Width classes

ClassProperties
w-autoauto
w-00
w-2525%
w-5050%
w-7575%
w-100100%

Height classes

ClassProperties
h-autoauto
h-full100dvh
h-00
h-2525%
h-5050%
h-7575%
h-100100%

Responsive breakpoints

Use these sizing classes in combination with breakpoints to ensure your layouts are responsive. The format {breakpoint}:{property}-{size} allows for easy adjustment. For instance:

  • lg:w-50 sets the width to 50% on large screens.

Breakpoints don’t apply to the smallest xs size, which is inferred.

Usage example:

<div class="h-auto w-75 lg:w-50">My content</div>

This example applies a width of 75% by default and switches to 50% on large screens, using Mytril’s utility classes to enhance layout control.

  1. Home
Help us improve this component!
or

Minedelve respects your privacy

Minedelve and our partners use cookies or similar technologies to enable us to improve the site, your experience and to ensure the proper functioning of the site, to collect statistics in order to optimize the services offered, and to adapt Minedelve's content.