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


Progress value is 30%


Width utility classes:

Class Description
.width-xxxxs width: 0.25rem; (~4px)
.width-xxxs width: 0.5rem; (~8px)
.width-xxs width: 0.75rem; (~12px)
.width-xs width: 1rem; (~16px)
.width-sm width: 1.25rem; (~24px)
.width-md width: 2rem; (~32px)
.width-lg width: 3rem; (~48px)
.width-xl width: 4rem; (~64px)
.width-xxl width: 6rem; (~96px)
.width-xxxl width: 8rem; (~128px)
.width-xxxxl width: 16rem; (~256px)
.width-0 width: 0;
.width-10% width: 10%;
.width-20% width: 20%;
.width-25% width: 25%;
.width-30% width: 30%;
.width-33% width: calc(100% / 3);
.width-40% width: 40%;
.width-50% width: 50%;
.width-60% width: 60%;
.width-66% width: calc(100% / 1.5);
.width-70% width: 70%;
.width-75% width: 75%;
.width-80% width: 80%;
.width-90% width: 90%;
.width-100% width: 100%;
.width-100vw width: 100vw;
.width-auto width: auto;

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

:root {
  // size - scale used to set width/height values 
  --size-xxxxs: 0.25rem; // ~4px
  --size-xxxs:  0.5rem;  // ~8px
  --size-xxs:   0.75rem; // ~12px
  --size-xs:    1rem;    // ~16px
  --size-sm:    1.5rem;  // ~24px
  --size-md:    2rem;    // ~32px
  --size-lg:    3rem;    // ~48px
  --size-xl:    4rem;    // ~64px
  --size-xxl:   6rem;    // ~96px
  --size-xxxl:  8rem;    // ~128px
  --size-xxxxl: 16rem;   // ~256px

Responsive #

Edit the width at a specific breakpoint adding the @{breakpoint} suffix to the width utility classes:

<div class="width-100% [email protected]">
  <!-- ... -->

✅ Project duplicated

✅ Project created

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