Steal these max-width utility classes and use them on every Oxygen website!

With one class you can responsively control the width of elements and even create effective padding (without using padding) with a single class.

It's the fastest, easiest, and most future-proof way to sculpt your page content.

While this is super quick and useful for single developer builds, you get the added benefit of consistency when building with teams. Instead of everyone using their own technique or their own random sizes, these utility classes will ensure everyone is using the same sizing methods, same widths, and same units (e.g. rem vs px).

NOTE: To use REM units effectively, you'll want to make sure you reset your root font-size to 62.5%.

html {
     font-size: 62.5%;
}

Then add these:

/* MAX WIDTH UTILITY CLASSES */

.max-w--320 {
  width: 100%;
  max-width: 32rem;
}

.max-w--480 {
  width: 100%;
  max-width: 48rem;
}

.max-w--640 {
  width: 100%;
  max-width: 64rem;
}

.max-w--720 {
  width: 100%;
  max-width: 72rem;
}

.max-w--960 {
  width: 100%;
  max-width: 96rem;
}

.max-w--1120 {
  width: 100%;
  max-width: 112rem;
}

.max-w--full {
  width: 100%;
  max-width: 100%;
}