Fluid Boxes
Fluid boxes are different from container boxes. Fluid boxes are elements (mostly div) whose height and width are rendered
in respect to the percentage of the current screen size. The height is usually depedent on the width of the box itself. In this case, only the
width of the box needs to be defined while the height has been predefined.
In order to keep this box responsive based on devices, three device widths variable
--fluid-1:,
--fluid-2:,
--fluid-3: must be defined
The
--fluid-1 variable is applied on mobile screens,
--fluid-2 variable is applied on medium screens and
--fluid-2 variable is used on screen size at minimum of 1025 pixels.
Example: Fluid Box
<img
class="fluid-box"
src="https://spoova.com/res/assets/images/bkg.jpg"
style="--fluid-1:2; --fluid-2:2.5; --fluid-3:3.5;"&
/>
In the code above, the fluid-control controls the height of the image based on screen size. Also, the img tag can be replaced with div element.