Docs / Max-Width

Max-Width

vel-src: sizing.css

Utilities for setting the maximum width of an element.

ClassProperties
vel-max-w-nonemax-width: none
vel-max-w-xsmax-width: 20rem
vel-max-w-smmax-width: 24rem
vel-max-w-mdmax-width: 28rem
vel-max-w-lgmax-width: 32rem
vel-max-w-xlmax-width: 36rem
vel-max-w-2xlmax-width: 42rem
vel-max-w-3xlmax-width: 48rem
vel-max-w-4xlmax-width: 56rem
vel-max-w-5xlmax-width: 64rem
vel-max-w-6xlmax-width: 72rem
vel-max-w-fullmax-width: 100%
vel-max-w-screenmax-width: 100vw

Examples

Max-width scale

vel-max-w-xs (20rem)
vel-max-w-sm (24rem)
vel-max-w-md (28rem)
example.html
<div class="vel-flex vel-flex-col vel-gap-3">
  <div class="vel-max-w-xs vel-bg-primary vel-text-white vel-rounded-md" style="padding:10px 16px;font-size:13px">vel-max-w-xs (20rem)</div>
  <div class="vel-max-w-sm vel-bg-success vel-text-white vel-rounded-md" style="padding:10px 16px;font-size:13px">vel-max-w-sm (24rem)</div>
  <div class="vel-max-w-md vel-bg-info vel-text-white vel-rounded-md" style="padding:10px 16px;font-size:13px">vel-max-w-md (28rem)</div>
</div>