Responsive widgets

Some widgets may need to use a responsive design to fit different widths. Media queries should not be used since the width of the widget may not be relative to the viewport width. To make adaptions for different widget sizes, use CSS container queries.

The grid column container where the app will be displayed is a containment context named dashboard-widget.

Responsive widget example

Responsive example widget

96%

Resize this widget →

<section class="env-dashboard-widget example-responsive-widget">
   <h2 class="env-ui-text-sectionheading">
      Responsive example widget
   </h2>
   <p class="env-ui-text-kpi-number">96%</p>
</section>
@container dashboard-widget (max-width: 449px) {
   .example-responsive-widget .env-ui-text-kpi-number {
      font-size: var(--env-ui-text-kpi-number-font-size-small);
      color: var(--env-dashboard-color-pink-50);
   }
}

@container dashboard-widget (min-width: 580px) {
   .example-responsive-widget .env-ui-text-kpi-number {
      font-size: var(--env-ui-text-kpi-number-font-size-large);
      color: var(--env-dashboard-color-light-blue-90);
   }
}

Envision documentation