Padding Max Width?

How To
1

Is there a way to do this in bricks without custom CSS? I can make padding on a container 1.8vw, but then it keeps growing on screen for widths larger than 1440px. It would need to be something like “padding width” and a “padding max width.”

@media (min-width: 1440px) {
  root {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media (max-width: 1439px) {
  root {
    padding-left: 1.8vw;
    padding-right: 1.8vw;
  }
}
2

Hey @macksix,

not a Bricks but just regular CSS topic. You can use the min function:

root {
    padding-left: min(1.8vw, 30px);
    padding-right: min(1.8vw, 30px);
}

Or a bit more modern:

root {
    padding-inline: min(1.8vw, 30px);
}

If you also need a minimum padding use clamp instead:

root {
    padding-inline: clamp(10px, 1.8vw, 30px);
}

See min(), max(), and clamp(): three logical CSS functions to use today.

Best,

André

1 Like
3

Wow, nice! Thank you! :smiley: