Press/to search

Effects

Fluid Padding v1.0.8

Utilities for sets min and max paddings for screen size without breakpoints.


Class

classcss
fluid
p-min-{value}
p-max-{value}
@media screen and (min-width: 20rem) { .fluid.p-min-{modifier}.p-max-{modifier} { padding: calc({min} + 0 * ((100vw - 20rem) / 30)) } } @media screen and (min-width: 50rem) { .fluid.p-min-{modifier}.p-max-{modifier} { padding: {max} } }
valuemodifier
00
10.25rem
20.5rem
30.75rem
41rem
51.25rem
61.5rem
82rem
102.5rem
123rem
164rem
205rem
246rem
328rem
4010rem
4812rem
5614rem
6416rem
72 v1.1.318rem
80 v1.1.320rem
88 v1.1.322rem
96 v1.1.324rem
104 v1.1.326rem
112 v1.1.328rem

Usage

Set padding spacing adaptively to the width of the screen size. When the smaller screen size, the padding is p-10 max. Meanwhile, when the screen size is getting bigger, the padding is p-4 max.

<!-- Example -->
<y class="fluid p-min-10 p-max-4">
...
</y>

Mix with other fluid utilities, such as Fluid Margin, Fluid Font Size.

<!-- Example -->
<y class="fluid p-min-8 p-max-4 m-min-4 m-max-2 text-min-lg text-max-md">
...
</y>

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.