# Responsive layout and fullscreen behavior

Source: https://developer.avalara.com/products/self-serve-tariff-code/integration-guides/classyvue-integration-guide/gfb3024695663279/

Guide: ClassyVue integration guide

# Responsive layout and fullscreen behavior

ClassyVue adapts to different screen sizes and supports a fullscreen mode for small viewports. Learn how to configure responsive layout and fullscreen behavior for the widget on your host page.

ClassyVue is designed to adapt to different screen sizes on the host page. The widget renders at the width and height of the

container that you define, so you can control its dimensions through your page layout.

Below approximately 400 px, the classifier needs the full viewport to remain usable. To handle small viewports, apply a fullscreen CSS class at the appropriate breakpoint and include the `data-on-abort` handler so users can exit the widget:

```
@media (max-width: 768px) {
  .ccce-fullscreen {
    position: fixed;
    z-index: 6000;
    border-radius: 0 !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    top: 0; right: 0; bottom: 0; left: 0;
    transition: all .2s ease-in-out;
  }
}
```