Is there any way to adjust the height and width of the components based on screen size?

💬 Feature Requests
4

I needed "responsiveness" of a container in the past and used this very simplistic approach in a transformer:

const width = {{ viewport.width }}

if (width < 576) {
  return 'xs';
} else if (width >= 576 && width < 768) {
  return 'sm';
} else if (width >= 768 && width < 992) {
  return 'md';
} else if (width >= 992 && width < 1200) {
  return 'lg';
} else {
  return 'xl';
}

It works for components that don't have too many settings otherwise you'll be duplicating a bunch. Leanest workaround I found so far.

1 Like