🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Max Width

The .max-width-{size} classes can be used to set the max-width of an element:

Class Description
.max-width-xxxxs max-width: var(--max-width-xxxxs)
.max-width-xxxs max-width: var(--max-width-xxxs)
.max-width-xxs max-width: var(--max-width-xxs)
.max-width-xs max-width: var(--max-width-xs)
.max-width-sm max-width: var(--max-width-sm)
.max-width-md max-width: var(--max-width-md)
.max-width-lg max-width: var(--max-width-lg)
.max-width-xl max-width: var(--max-width-xl)
.max-width-xxl max-width: var(--max-width-xxl)
.max-width-xxxl max-width: var(--max-width-xxxl)
.max-width-xxxxl max-width: var(--max-width-xxxxl)
.max-width-100% max-width: 100%
.max-width-none max-width: none

Responsive - edit the visibility utility classes at specific breakpoints adding the @{breakpoint} suffix (@xs, @sm, @md, @lg, @xl - e.g., [email protected]).


Optionally, you can update the default max-width variables by adding your own in the 'custom-style/_util.scss' file:

:root {
  --max-width-xxxxs: 20rem;  // ~320px
  --max-width-xxxs:  26rem;  // ~416px
  --max-width-xxs:   32rem;  // ~512px
  --max-width-xs:    38rem;  // ~608px
  --max-width-sm:    48rem;  // ~768px
  --max-width-md:    64rem;  // ~1024px
  --max-width-lg:    80rem;  // ~1280px
  --max-width-xl:    90rem;  // ~1440px
  --max-width-xxl:   100rem; // ~1600px
  --max-width-xxxl:  120rem; // ~1920px
  --max-width-xxxxl: 150rem; // ~2400px
}

If you want to set the max-width equal to the current breakpoint, use one of the .max-width-adaptive-{size} classes (example):

Class Description
.max-width-adaptive-sm set max-width equal to 512px by default, and 768px at breakpoint sm
.max-width-adaptive-md set max-width equal to 512px by default, 768px at breakpoint sm, and 1024px at breakpoint md
.max-width-adaptive-lg set max-width equal to 512px by default, 768px at breakpoint sm, 1024px at breakpoint md, and 1280px at breakpoint lg
.max-width-adaptive-xl set max-width equal to 512px by default, 768px at breakpoint sm, 1024px at breakpoint md, 1280px at breakpoint lg, and 1440px at breakpoint xl

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.